An async Action with a pending state
isPending turns true as the Action starts and false only after the result is set. The extra pending=true render after got ASHA is React rendering the new update before committing it with the end of the Action. Click Save yourself and type while it saves: the input never freezes.
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 pending=false saved=
action start
render pending=true saved=
got ASHA
render pending=true saved=
render pending=false saved=ASHA