Debounced search
Build a search input that delays requests and cancels stale work.EasyHooks
25 min73.1% acceptance
Description
Implement a search experience that waits for a pause in typing before calling the injected search function. Stale responses must never replace newer results and clearing the query should reset immediately. Expose a searchbox named Search products and render each returned SearchResult label.
Requirements
Typing updates the visible search input value immediately.
A search request starts only after the query has remained unchanged for 300 milliseconds.
A response for an older query never replaces results for the newest query.
Clearing the query immediately clears prior results and does not wait for the debounce delay.
The component communicates loading and empty-result states in visible text.
Typing pause
Input
Type react within 300ms
Expected output
One search request is made after typing stops
Constraints
Use a 300ms debounceClean up timersIgnore stale responses
Hints
Hint 1
Keep the visible input value immediate and treat the delayed search as a separate effect.
Hint 2
Return cleanup from the effect so a newer query cancels the previous pending timer.
Hint 3
Associate each request with its effect instance and ignore its result after that instance is cleaned up.
useEffectdebounceasync