# 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. Use when this capability is needed.

- Skill: `tomevault-io/tracking-form-status` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/tracking-form-status`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tracking-form-status/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/tracking-form-status

---


# Form Status Tracking with useFormStatus

`useFormStatus` provides status info about parent form submissions.

## Basic Usage

**MUST be called inside a form component:**

```javascript
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:**

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

✅ **Correct - called inside form:**

```javascript
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](https://tomevault.io/claim/djankies) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->