useFormStatus

~18 min · useFormStatus, pending, submit button

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

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

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>
  );
}

External links

useFormStatus

Exercise

Build a reusable <SubmitButton> Client Component that takes a label and uses useFormStatus for pending state. Drop it into three different forms.