One design-system button, two forms
The same component in two forms: only the newsletter button goes pending. No props carry the status. Press Search yourself to see the other one.
useFormStatus() from react-dom lets any component rendered inside a <form> read that form's submission status (pending, data, method, action) without props, which is how design-system submit buttons show their own loading state.
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 SubmitButton that shows Saving "<title>"... using the submitted title field while pending.
Write a PendingNotice component that renders a role="status" paragraph Sending... only while its form submits.
Explain it without notes
What problem does useFormStatus solve?
Why does useFormStatus return pending: false in the component that renders the form?
When would you use useFormStatus and when useActionState's isPending?
Preview
Console
Nothing logged yet.Expected console output
during: Search | Subscribing me@example.com (disabled)
after: Search | Subscribe