Ordering: a slow old answer overwrites a fast new one
The user's latest search was ab, but the page ends on A results: the slow request answered last, so its update ran last. isPending stayed true until both finished. Topic 19.4 fixes this with a queue; a request id in a ref also works.
In React 19 startTransition accepts an async function: React calls it an Action, keeps isPending true until it finishes, sends errors it throws to the nearest error boundary, and lets the rest of the UI stay responsive while it waits.
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.
Write a DeleteButton that calls fakeDelete() (300 ms) as an Action, shows Deleting... and is disabled while pending.
Change the ordering example so only the latest search can set the result.
Explain it without notes
What is an Action in React 19 and how does it differ from React 18 transitions?
Why must state updates after await be wrapped in startTransition again?
What happens when an Action throws?
Two searches run as Actions and the older one shows. Why, and how do you fix it?
Preview
Console
Nothing logged yet.Expected console output
render result=none pending=false
search a sent
render result=none pending=true
search ab sent
render result=none pending=true
search ab answered
render result=none pending=true
search a answered
render result=none pending=true
render result=A results pending=false