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.