useTransition: the old tab stays while the new one renders
One click, two renders: first urgent (old tab, isPending true), then the transition (new tab). Click Posts then Home quickly yourself: Home wins at once, because React drops the unfinished Posts render. Each post takes 1 ms in this development build; production is faster, but the pattern is the same.
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: tab = home, isPending = false
--- click Posts
App rendered: tab = home, isPending = true
App rendered: tab = posts, isPending = false