React 19+ · Hook

useFormStatus

useFormStatus lets a component rendered inside a form read the status of its parent form submission. Use it to show pending UI, inspect submitted data, or access the form method and function action.

Since: 19

How it works

useFormStatus reads submission status from the nearest parent <form>, allowing descendants such as reusable buttons to react without receiving status props. It returns whether submission is pending plus the submitted FormData, HTTP method, and function action when applicable.

Syntax

const { pending, data, method, action } = useFormStatus();

Returns

An object with pending, data, method, and action. pending is boolean; data is FormData or null; method is 'get' or 'post'; and action is the parent form's function action or null.

Key points

Use it when a descendant needs access to the parent form's latest submission status.
Call it with empty parentheses; configuration comes from the surrounding parent form.
The pending boolean indicates that the parent form is actively submitting.
During an active submission, data exposes the submitted fields as FormData.
The method field reports whether the parent form submits with GET or POST.
When the form has a function action, action identifies that function.

Common mistakes

Call the Hook in a descendant component, not directly in the component that renders the <form>.
The status belongs to the parent form; a nested or separately rendered form is not observed by the component that owns it.
The action field is only populated when the parent form uses a function action.

Example: Disable a submit button while the form action runs

import { useFormStatus } from "react-dom";

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

export default function SignupForm() {
  async function signup(formData: FormData) {
    await new Promise((resolve) => setTimeout(resolve, 500));
    console.log(formData.get("email"));
  }

  return (
    <form action={signup}>
      <input name="email" type="email" required />
      <SubmitButton />
    </form>
  );
}

A submit button reads its parent form's pending state and disables itself while the action runs.

When to use it

Pending submit feedback

Disable a submit control and change its label while the form action is running.

Context-free form controls

Build reusable design-system controls that react to their containing form without prop drilling.

Submission metadata

Inspect the submitted fields or determine whether the parent form uses GET or POST.

Interview questions

QWhat problem does useFormStatus solve, and where is it imported from?

It reads status from the parent form through the component tree, so a descendant can update its UI without receiving pending state through props. The Hook is imported from react-dom, not react.

Follow-up: What does it observe when multiple forms exist? It observes only the nearest relevant parent form, not a form rendered by the same component or a child component.

QWhat does useFormStatus return?

The Hook takes no arguments and returns an object containing pending, data, method, and action. pending is true while the parent form is submitting.

Follow-up: What are the inactive values? data is null without an active submission or parent form, and action is null without a parent form or function action.

QHow would you use it to provide submission feedback?

Place the Hook in a component rendered inside the form, commonly a submit button. Use pending to disable the button or show a submitting label while the form action runs.

Follow-up: Can the Hook be placed in the form-rendering component before its <form> output? No; it must execute in a component rendered inside the form.

useActionState
useOptimistic
form
useFormStatus

Source: useFormStatus – React. Checked 2026-10-15.