React's useFormStatus: Read Form State from a Child Component
The useFormStatus hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.
Why it exists
Before this hook, if a child component like a submit button needed to know if a form was submitting, you had to manage state in the parent and pass it down as props. This created tight coupling and boilerplate code. useFormStatus was created to decouple a form's state from its children, allowing them to react to submissions independently.
The mental model
Think of useFormStatus as a spy inside a form. Any component using this hook can ask, "Hey, is our parent form submitting right now?" without needing the form to explicitly tell it. It's a one-way mirror into the form's state, accessible only from the inside.
How it works
When you call useFormStatus() from a component, it returns a status object: { pending, data, method, action }. This component must be a child of a <form>. The pending property is a boolean that's true while the form is actively submitting. data is a FormData object containing the submitted values. method is the HTTP method ('get' or 'post'), and action is the function passed to the form's action prop.
When to use it
The primary use case is creating self-contained UI components that react to form state. A perfect example is a reusable <SubmitButton> component that shows "Submitting..." and disables itself when pending is true. You can drop this component into any form, and it just works without needing any props.
When not to use it
Do not call this hook in the same component that renders the <form> tag. It is designed to be used in a child component and only looks upwards in the component tree for a parent form. It will not return status information for a <form> rendered in the same component or in a child component.
One canonical example
A common pattern is to create a dedicated Submit component that encapsulates the button logic.
function SubmitButton() { const { pending } = useFormStatus(); return <button type="submit" disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>; }
You can then place this <SubmitButton /> component inside any form to get a submit button with a built-in pending state, no props required.
function UserProfileForm() { return (<form action={updateUser}><SubmitButton /></form>); }Interview question
A developer wants to use useFormStatus to disable a submit button. In which scenario would the hook not provide the expected form submission status?
- a.The button component is a child of a div element that is a sibling to the <form> element.
- b.The component calling useFormStatus is the same component that renders the <form> element.Correct
- c.The button component is nested inside a custom FormControls component, which is then placed inside the <form>.
- d.The button component is a direct child of the <form> element.
Why? this is the answer
The card explicitly states, "Do not call this hook in the same component that renders the <form> tag." It is designed to be used in a child component and only looks upwards in the component tree for a parent form. While a sibling component (Option A) would also fail, the restriction on the component *rendering* the form is specifically highlighted as a 'when not to use it' condition.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles