Results become state, and calls queue
The second call starts only after the first returns, and gets prev=5. React commits the final state once the queue is empty, so the screen goes 0 → 10 without flashing 5.
const [state, formAction, isPending] = useActionState(fn, initialState) wraps an action so React keeps whatever it returned last as state, tells you while it runs, and queues calls one after another; it is the standard way to show a form's result and validation errors.
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 like counter with useActionState whose action waits 200 ms and returns prev + 1, with a button that says Liking... while pending.
Write a newsletter action that returns { error: "Enter an email." } for an empty field and { message: "Thanks!" } otherwise, and render the result.
Explain it without notes
What does useActionState return, and what does the action receive?
How does useActionState handle several quick submissions?
Describe the validation errors pattern with useActionState.
What is the permalink argument for?
Preview
Console
Nothing logged yet.Expected console output
render total=0 pending=false
action 1 starts, prev=0
render total=0 pending=true
action 1 returns 5
action 2 starts, prev=5
action 2 returns 10
render total=10 pending=false