If useFormStatus() always returns pending: false, check where the component calling it sits in the rendered tree. The hook reads the status of a parent <form>; it cannot observe a form returned by that same component. Put the hook in a child such as SubmitButton, and render that child inside the form.
Why useFormStatus can stay false
useFormStatus is imported from react-dom and takes no arguments. It returns a status object that includes pending, data, method, and action. Its scope is the nearest relevant parent form—not a form the calling component renders itself.
As an Amazon Associate I earn from qualifying purchases.
That makes this a component-placement issue in many cases. A hook call in the component that returns <form> is not inside that form in the rendered tree. Likewise, a component rendered beside the form or above it cannot read that form’s status. React’s useFormStatus reference identifies this as the reason status.pending can remain false.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Fix it by placing SubmitButton inside the form
Move the hook into a separate child component, then render that child within the form it should track:
#1 Best Overall
import { useFormStatus } from 'react-dom';
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? 'Submitting…' : 'Submit'}
</button>
);
}
function ContactForm({ action }) {
return (
<form action={action}>
{/* fields */}
<SubmitButton />
</form>
);
}Here, SubmitButton is rendered under the form, so its hook can read that parent form’s submission status. While submission is pending, the button is disabled and its label changes. React’s form documentation also demonstrates reading pending status from a component rendered inside a form.
Check the component tree if pending is still false
- Find the hook call. Identify the component that calls
useFormStatus(), not merely the component that owns or returns the form. - Check its rendered position. The hook caller must be a descendant of the specific
<form>whose status you need. Being a sibling or ancestor is not enough. - Extract the status UI when needed. If the component calling the hook also returns the form, move the hook and submit button into a separate child, then place that child inside the form.
- Confirm the actual nesting. Make sure the rendered form wraps the child. The component’s source file or name alone does not establish its position in the rendered tree.
What the returned status fields mean
pendingindicates whether the parent form is being submitted; use it to show progress or disable submission controls.dataexposes the submittedFormDatawhile a submission is active and is otherwisenull.methodindicates the form method, such asGETorPOST.actionrefers to the function passed to the parent form’sactionprop in the documented function-action case. It isnullin the stated cases where the action is absent or not a function.
The hook reports status; it does not define the form’s action or take arguments. For the documented React DOM hook context, see the Built-in React DOM Hooks overview, which distinguishes React DOM hooks from hooks supported in non-browser environments such as native iOS, Android, and Windows applications.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
