Q46: How does automatic form resetting work with React 19 Form Actions?
In React 19, passing an action handler to <form action={fn}> automatically resets the form inputs upon successful action completion if the action is synchronous or uses automatic Server Action transitions.
React 19 Form Action Auto Reset
function CommentBox() {
async function submitComment(formData) {
'use server';
await saveComment(formData.get('comment'));
}
return (
<form action={submitComment}>
<textarea name="comment" required />
<button type="submit">Post</button>
</form>
);
}💡 Submitting the form executes submitComment and resets the textarea automatically.
Key Takeaways
- Simplifies form cleanup without manual input reference resets.
- Integrates natively with Progressive Enhancement when JS is disabled.
Knowledge Check
What happens to input fields inside a React 19 <form action={serverAction}> after submission?