SubmitButton component pattern, why it must be a child of the form.
useFormStatus provides the pending state of the nearest parent form. It's the simplest way to show loading indicators during form submissions.
From components/design/SubmitButton.tsx:
'use client';
import { useFormStatus } from 'react-dom';
export function SubmitButton({ children }) {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? <Spinner /> : children}
</button>
);
}The hook only works in components that are children of the form:
// ❌ Always returns pending: false
function Form() {
const { pending } = useFormStatus();
return <form>...</form>;
}
// ✅ Works - SubmitButton is a child of the formReact needs to track which form triggered the submission. By requiring the hook inside a form's children, React reliably determines the pending state for that specific form.