useFormStatus is a React hook that lets you read the submission state of a form.

Problems

Without useFormStatus, you often write:

const [isSubmitting, setIsSubmitting] = useState(false)

And manually manage:

• Button disabled states.
• Loading labels.
• State cleanup.

With useFormStatus, React handles this for you — declaratively.

Disable Submit Button

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

✔ No prop drilling.
✔ Always in sync with form state.
✔ Prevents duplicate submissions

How It Works

useFormStatus reads the status of the nearest parent <form>.

That means:

• It only works inside a form.
• It automatically updates when the form submits.
• It resets when the submission finishes

Real Example: Login Form UX

function LoginForm() {
  return (
    <form action={login}>
      <input name="email" />
      <input name="password" type="password" />
      <SubmitButton />
    </form>
  )
}

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Logging in...' : 'Login'}
    </button>
  )
}

✔ Clear feedback.
✔ Prevents double-clicks.
✔ Improves accessibility.