Advanced
A search box without race conditions
fakeSearch(query) answers one-letter queries slowly (900 ms) and longer ones fast (300 ms), so answers can arrive out of order.
Search in an effect whenever the query changes and show Results for <query> in <p id="results">. When the box is empty, #results says Type to search.
Make sure a late answer for an old query never replaces the answer for the current one (use an ignore flag or AbortController). The input has id="search".
What Check tests
- An empty box shows
Type to search - Typing
athenabshows the results forab - The late answer for
adoesn't replace them - Clearing the box shows
Type to searchagain
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.