CodeParkimport { useFormStatus } from 'react-dom';
function SignupForm() {
const { pending } = useFormStatus();
return (
<form action={signup}>
<input name="email" />
<button disabled={pending}>Sign up</button>
</form>
);
}
It only reports on a parent
<form>, not one rendered in the same componentuseFormStatus only reports on a parent <form>. It reads the status of the nearest <form> above the calling component. Here the form is rendered by the same component, so there is no form above it. Fix it by moving the button into its own component, rendered inside the form.
The other options are wrong:
• "Must be imported from react" is wrong. useFormStatus really comes from react-dom, so this import is correct.
• "Only works with useActionState" is wrong. It works with any <form action>, without useActionState.
• "signup must return a promise" is wrong. Even an async signup would not help, because the hook still has no parent form to read.