What does the useFormStatus hook do in React 19?
useFormStatus, from react-dom, reads the status of the parent form: whether it is pending, plus the submitted data. It must be called inside a component rendered within the form, which lets a submit button disable itself.
Explain it simply
Think of a submit button that knows its own form is being processed, like a lift button that lights up after you press it. useFormStatus gives any child component that information without passing a loading prop down.
It returns an object with pending, data, method and action. The important rule: it reports on a <form> that is a parent of the component calling it. If you call it in the same component that renders the form, it will not work.
It pairs with form actions: while the action function runs, pending is true.
Example
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>;
}
function Profile({ saveAction }) {
return (
<form action={saveAction}>
<input name="name" />
<SubmitButton />
</form>
);
}What to say in the interview
"useFormStatus tells a component whether its parent form is currently submitting. It works only for descendants of the form, so I extract the button into its own component. It removes the need to thread a loading prop through the form tree when I use form actions."
Common mistakes
- Calling the hook in the same component that renders the form tag.