Advanced
Keep typing fast with useDeferredValue
The search box #q filters a slow list of 300 cities (each SlowCity burns a little time). Typing feels sluggish because every keystroke renders the whole list urgently.
Keep the input urgent and let the list lag behind: pass a deferred copy of the query to the list with useDeferredValue, and wrap CityList in memo so the urgent render can skip it.
While the list is behind, give the list's wrapper id="results" an opacity of 0.5 (and 1 when up to date). The list must still end up showing only the matching cities.
What Check tests
- All 300 cities show at first
- Uses useDeferredValue
- CityList is wrapped in memo
- Typing kochi updates the box and, soon after, shows only the 50 Kochi cities
- The results are fully opaque once they are up to date
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.