Beginner LevelReact JS & React 19
How does useFormStatus allow child components to read parent form pending status in React 19?
❓ Interview Prompt: Explain React 19 `useFormStatus`, reading parent `<form>` submission status, building reusable Submit buttons without prop drilling.
'useFormStatus' is a React 19 hook that allows child components inside a '<form>' to read the parent form's status without receiving props:
Properties Returned:
'const { pending, data, method, action } = useFormStatus();'
Primary Use Case:
Creating reusable '<SubmitButton />' components that automatically disable themselves and display loading spinners whenever their parent form is submitting!
Code Implementation Example
jsx
import { useFormStatus } from 'react-dom';
// Reusable Submit Button Component
function SubmitButton() {
const { pending } = useFormStatus(); // Reads parent <form> submission state!
return (
<button type="submit" disabled={pending}>
{pending ? 'Submitting...' : 'Submit Form'}
</button>
);
}
function ContactForm() {
return (
<form action={async (formData) => await saveContact(formData)}>
<input name="email" type="email" />
<SubmitButton /> {/* Automatically knows when parent form is pending! */}
</form>
);
}💡Reading parent form pending status in React 19 using useFormStatus.
🎯 Interview Key Takeaway
useFormStatus allows child UI components to detect parent form submission states without manual prop passing.
#React 19#useFormStatus#Forms#Hooks#Beginner
Back to all React JS & React 19 Questions→