Q47: What is the useFormStatus Hook in React 19 and where must it be placed?
useFormStatus gives status information about the parent <form> submission ({ pending, data, method, action }). Crucially, it must be called from a component nested inside the <form>, acting like a Context consumer.
Child Submit Button with useFormStatus
import { useFormStatus } from 'react-dom';
function SubmitButton() {
// Reads status of parent <form>
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
);
}
// Usage inside form:
<form action={action}><SubmitButton /></form>💡 SubmitButton reads parent form pending status without requiring prop drilling.
Key Takeaways
- Reads pending status of surrounding parent HTML
<form>elements. - Must be called inside a child component nested beneath
<form>.
Knowledge Check
What happens if you call useFormStatus() inside the same component that renders the <form> tag itself?