tracking-form-status

name	tracking-form-status
description	Teaches useFormStatus hook for tracking form submission state in React 19. Use when implementing submit buttons, form loading states, or pending indicators. Use when this capability is needed.
metadata	{"author":"djankies"}

Form Status Tracking with useFormStatus

useFormStatus provides status info about parent form submissions.

Basic Usage

MUST be called inside a form component:

import { useFormStatus } from 'react-dom';

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

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

function MyForm() {
  async function handleSubmit(formData) {
    'use server';
    await saveData(formData);
  }

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

Return Values

• pending (boolean): Whether form is submitting
• data (FormData | null): Data being submitted
• method (string): HTTP method ('get' or 'post')
• action (function | null): Action function

Critical Requirement

❌ Wrong - called at form level:

function MyForm() {
  const { pending } = useFormStatus();
  return <form>...</form>;
}

✅ Correct - called inside form:

function MyForm() {
  return (
    <form>
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

For comprehensive useFormStatus documentation, see: research/react-19-comprehensive.md lines 312-355.

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.