useFormStatus

What it does

useFormStatus reads the submission state of the parent form. Drop a child Client Component inside a <form> and it gets { pending, data, method, action }.

Where it must be called

Inside a child of the form. Calling it in the same component that renders the form returns nothing — the hook reads form context provided by the parent.

React 19 additions

Field	Meaning
`pending`	True while the action is running
`data`	The `FormData` being submitted
`method`	Always `'post'`
`action`	Reference to the action being called

Put submit controls and progress messages in children of the form whose context they observe. This keeps separate forms independent and lets a reusable button read the nearest submission without a global loading flag. Place more than one form on a page and submit only one. Each button's pending state and submitted data must remain bound to its own parent form. For long uploads, verify that canceling or retrying does not lock unrelated forms.

useFormStatus observes form submission, not every asynchronous task. An action triggered outside a form or a multi-stage job needs its own state model. Do not stretch the hook beyond the lifetime it represents. Render two forms with separate status children and make one action slow. Only its controls should report pending. Inspect data, method, and action, and confirm the same hook called beside rather than inside the form has no parent context.

Code

Submit button reads form pending·tsx

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="rounded bg-blue-600 px-3 py-1 text-white">
      {pending ? 'Saving&hellip;' : label}
    </button>
  );
}

// Usage — must be INSIDE the form
export function SaveForm({ action }: { action: (fd: FormData) => Promise<void> }) {
  return (
    <form action={action}>
      <input name="title" required />
      <SubmitButton label="Save" />
    </form>
  );
}

What it does

Where it must be called

React 19 additions

Code

External links

Exercise

Progress

Comments 0