useFormStatus & form Actions in React

From the React Design Patterns cheat sheet · React 19 Actions & Forms · verified Jul 2026

useFormStatus & form Actions

Read pending state from a parent form without prop drilling

jsx
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
}

function MyForm() {
  return (
    <form action={async (formData) => { await save(formData); }}>
      <input name="title" />
      <SubmitButton />
    </form>
  );
}
💡 useFormStatus reads parent form state - perfect for SubmitButton without prop drilling
⚡ Form actions auto-reset the form after success and provide automatic pending state
📌 useFormStatus only works in CHILD components - wrap your button in its own component
🟢 Combine with useActionState for full form state management without useState
useFormStatusformsreact-19

More React tasks

Back to the full React Design Patterns cheat sheet