What useFormStatus reports, inside and outside the form
Only Submit, which is inside the form, re-renders with the status. While pending it sees the FormData, the method and the action function itself. Outside never changes.
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
Outside: pending=false
Submit: pending=false data=null method=null action=null
Submit: pending=true data=react method=get action=search
Submit: pending=false data=null method=null action=null