practiceadvanced
Non-blocking search
An input filters a list of 6,000 items. As-is, the input feels sluggish because the filtering is expensive. Use useDeferredValue so the input responds instantly and the list updates with low priority.
Objectives
- 1.Keep the input controlled (urgent setState)
- 2.Create a deferred value from query
- 3.Pass the deferred — not query — to the expensive component
- 4.Show an
updating...indicator while query !== deferred - 5.Visually dim the list while it's out of sync (opacity)
your code
Hint
useDeferredValue returns a 'slow' copy of the value. When query and deferred differ, the list is stale — use that to show visual feedback.
Related concepts
Was this helpful?
Sign in to give feedback