Intermediate
useDebounce for a search box
Write useDebounce(value, delay) that returns value only after it has stopped changing for delay milliseconds (use an effect with a setTimeout and a cleanup).
The input (id="search") updates instantly. The paragraph id="result" shows Type to search while the debounced text is empty, and Searching for: <text> once the debounced text (300 ms) has caught up.
What Check tests
- It starts with
Type to search - Right after typing, the result hasn't changed yet
- About 300 ms later it shows
Searching for: rea - Fast typing restarts the wait: only the last text arrives
- The code defines and uses
useDebounce
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.