gh-djankies-claude-configs-react-19/skills/tracking-form-status/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
tracking-form-status	Teaches useFormStatus hook for tracking form submission state in React 19. Use when implementing submit buttons, form loading states, or pending indicators.	Read, Write, Edit	1.0.0

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.