Senior LevelReact JS & React 19
How do you cleanly reset form fields and state after a successful React 19 Server Action submission?
❓ Interview Prompt: Explain form resetting, React 19 `useActionState`, `formRef.current.reset()`, key resetting pattern, and action state callbacks.
Resetting uncontrolled form fields after a successful React 19 Server Action submission:
Reset Patterns:
1
'formRef.current.reset()': Call 'formRef.current.reset()' inside 'useEffect' when 'state.success' becomes 'true'.
2
Key Resetting Pattern: Change the '<form key={formKey}>' key prop when the action succeeds to force React to remount a fresh, clean form instance!
Code Implementation Example
jsx
function ContactForm() {
const [state, formAction, isPending] = useActionState(submitAction, null);
const [formKey, setFormKey] = useState(0);
useEffect(() => {
if (state?.success) {
setFormKey(k => k + 1); // Remounts fresh form, clearing all input fields!
}
}, [state]);
return (
<form key={formKey} action={formAction}>
<input name="email" required />
<button disabled={isPending}>Submit</button>
</form>
);
}💡Resetting form fields after successful Server Action via key remounting.
🎯 Interview Key Takeaway
Reset forms after Server Action submissions using formRef.current.reset() or updating the form's key prop.
#React 19#Server Actions#Forms#Senior
Back to all React JS & React 19 Questions→