useDeferredValue: the input stays fast, the list catches up
Typing "a" renders App twice: first urgently with the old deferred value (SlowList is skipped, so the letter appears at once), then in the background with the new one. Type fast yourself: the list skips intermediate values and only renders for what you stopped at.
Concurrent rendering lets React prepare a slow update in the background and interrupt it for urgent ones; useTransition marks a state update as non-urgent and gives you isPending, and useDeferredValue lets a slow part of the screen lag behind a fast-changing value so typing stays responsive.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A FilterPanel changes category state and a big ProductGrid re-renders slowly. Make category changes non-blocking and dim the grid while pending.
A Results component receives query as a prop from a parent you can't change. Make the input above it stay responsive.
Explain it without notes
What is the difference between an urgent update and a transition?
What happens, step by step, when you call startTransition(() => setTab("posts"))?
When would you choose useDeferredValue over useTransition?
Why must the slow component be memoised for useDeferredValue to help?
Preview
Console
Nothing logged yet.Expected console output
App rendered: query = "", deferred = ""
SlowList rendered for ""
--- type a
App rendered: query = "a", deferred = ""
App rendered: query = "a", deferred = "a"
SlowList rendered for "a"