Error: useFormStatus must be used within a <form> that specifies an action prop

What causes this error

useFormStatus reads its pending/data state from the nearest parent <form>'s action — a Server Action or a plain async function passed to that prop. It has nothing to read from if the component calling it isn't actually nested inside such a form, or if the form still uses a traditional `onSubmit` handler that calls `event.preventDefault()` manually instead of using `action`.

The Fix

// Wrong — SubmitButton uses useFormStatus but isn't inside the form as a child,
// or the form uses onSubmit instead of action
function Page() {
  return (
    <>
      <form onSubmit={handleSubmit}>...</form>
      <SubmitButton /> {/* outside the form, and form uses onSubmit not action */}
    </>
  );
}

// Fix — nest the component inside the form, and use the action prop
function Page() {
  return (
    <form action={submitAction}>
      {/* other fields */}
      <SubmitButton />
    </form>
  );
}

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

Common causes / variations

• Rendering the status-reading component as a sibling of the form instead of a child
• Using `onSubmit` + `preventDefault()` instead of migrating to the `action` prop
• Calling `useFormStatus` in the same component that renders the `<form>` itself (it only sees status from forms rendered below it, not its own)

Related errors

See also: useOptimistic reverting early, Event handlers cannot be passed to Client Component props.