What is React 19 useFormStatus hook?

Question

Accepted Answer

**useFormStatus** is a React 19 hook from `react-dom` that provides **status information about the last form submission**. It tells you whether a form is currently submitting, what data is being sent, and more — without needing to manage loading state manually. **Important constraint:** `useFormStatus` **must be called from a component rendered inside a `

`**. It reads the status of the nearest parent form. **Complete code example:** ```tsx import { useFormStatus } from "react-dom"; function SubmitButton() { const { pending, data, method, action } = useFormStatus(); return ( ); } // Must be inside a function ContactForm() { const [state, formAction] = useActionState(submitContact, null); return (

<SubmitButton />
      {state?.error && <p className="error">{state.error}</p>}
    </form>
  );
}
```

**Returned properties:**
- `pending` — `true` while the form action is executing
- `data` — the `FormData` being submitted (or `null` if not submitting)
- `method` — `"get"` or `"post"` (the form's method)
- `action` — reference to the action function passed to the form

**Real-world example — optimistic updates with pending state:**
```tsx
function TodoForm() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const { pending } = useFormStatus();

const addTodo = async (formData: FormData) => {
    const title = formData.get("title") as string;

// Optimistic update — show immediately
    const optimisticTodo = {
      id: "temp-" + Date.now(),
      title,
      done: false,
      pending: true,
    };
    setTodos(prev => [...prev, optimisticTodo]);

// Server action
    const saved = await saveTodo(title);

// Replace optimistic with real data
    setTodos(prev => prev.map(t =>
      t.id === optimisticTodo.id ? { ...saved, pending: false } : t
    ));
  };

return (
    <div>
      <form action={addTodo}>
        <input name="title" disabled={pending} placeholder="New todo..." />
        <button disabled={pending}>Add</button>
      </form>
      <ul>
        {todos.map(t => (
          <li key={t.id} style={{ opacity: t.pending ? 0.5 : 1 }}>
            {t.title}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

**Key points:**
- Only works inside `<form>` components
- Must be called from a component rendered as a child of `<form>`
- Provides pending state **without manual useState**
- Works with both Server Actions and client-side form handlers
- Can be combined with `useOptimistic` for instant UI feedback

React: What is React 19 useFormStatus hook?