Debounced Search / Typeahead
Build a search box that filters a list of results — but only after the user stops typing for 400ms, not on every single keystroke.
Requirements
- Render a text input for search queries
- Debounce the search: wait 400ms after the last keystroke before filtering
- Show a loading indicator during the debounce delay
- Display filtered results (filter from a static mock dataset)
- Show "No results found" when the query matches nothing
- Clear button resets both input and results
Key Patterns
useDebounce hookuseEffect + setTimeout/clearTimeoutCleanup (cancel timer on unmount)Controlled inputLoading state
Important
Interview Tip
The key is the cleanup in useEffect: return () => clearTimeout(timer). If the user types again before 400ms, the old timer is cancelled and a new one starts. Without cleanup, every keystroke fires a search and you get race conditions.
🔍
50 items in dataset
Start typing to search…