Advanced
Debounced search that ignores stale answers
The search box #search sends a request on every keystroke (see the request: lines in the console), and slow answers to old searches can overwrite newer ones. One-letter searches are slow (600ms); longer ones are fast (100ms). Don't change searchApi.
Debounce: send a request only after 200ms without typing.
Ignore answers to searches that are no longer current (an ignore flag or an AbortController-style check in the effect cleanup).
Show results as <li> items inside #results. When a search finds nothing, show <p id="empty">No results</p> instead.
What Check tests
- Typing "app" quickly shows only matches for "app"
- Fast typing sends just one request
- A slow old answer can't overwrite a newer search
- No matches shows #empty and no list items
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.