useFormStatus is a React DOM hook that exposes the submission status of a parent form, making it easier to build responsive form interactions.

1. The Problem: Managing Submission State

Without useFormStatus, you might manually manage submission state:

const [isSubmitting, setIsSubmitting] = useState(false);

You then need to coordinate loading indicators, disabled buttons, and state cleanup.

When using React form Actions, useFormStatus provides this status directly.

2. Disable the Submit Button

import { useFormStatus } from "react-dom";

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

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

The button automatically reflects the pending state of its parent form.

3. How Does It Work?

useFormStatus reads the status of the nearest parent form.

Its returned object includes:

• pending: whether the form submission is pending.
• data: the submitted form data, or null.
• method: the submission method.
• action: the form Action being invoked, or null.

The hook must run in a component rendered inside the form. Calling it in the component that creates the form won’t track that form.

4. Real Example: Login Form

import { useFormStatus } from "react-dom";

async function login(formData: FormData) {
  "use server";

  const email = formData.get("email");
  const password = formData.get("password");

  // Validate credentials and perform authentication.
}

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

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

function LoginForm() {
  return (
    <form action={login}>
      <label>
        Email
        <input name="email" type="email" required />
      </label>

      <label>
        Password
        <input name="password" type="password" required />
      </label>

      <SubmitButton />
    </form>
  );
}

Note: The "use server" directive is for a framework or environment that supports Server Functions. In a client-only React application, the form Action can instead be an appropriate client-side function.

5. When Should You Use It?

Use useFormStatus when building forms with React Actions and you need submission feedback without manually passing pending state through props.