After a successful form submission, you often want to clear the input fields. The correct approach depends on whether the inputs are **uncontrolled** or **controlled**. ### Uncontrolled Form An uncontrolled input lets the DOM hold the current value: ```jsx ``` [React](/courses/reactjs)'s Action-based form behavior can reset uncontrolled form fields after a successful form action. This makes simple forms especially convenient. ### Controlled Form A controlled input stores its value in [React](/courses/reactjs) state: ```jsx 'use client'; import { useState } from 'react'; export default function Form() { const [message, setMessage] = useState(''); return ( setMessage(event.target.value)} /> ); } ``` The DOM cannot independently reset this value because React state controls it. After success you must update the state: ```javascript setMessage(''); ``` ### Manual DOM Reset Sometimes you want explicit control over resetting an uncontrolled form. A ref can be used: ```jsx 'use client'; import { useRef } from 'react'; export default function MessageForm() { const formRef = useRef(null); async function handleAction(formData) { await sendMessage(formData); formRef.current?.reset(); } return ( ); } ``` ### Do Not Reset on Validation Failure Suppose the user enters a long article and one small field is invalid. Clearing the entire form would be frustrating. A better flow is: ```text Submit ↓ Validation fails ↓ Show errors ↓ Keep useful user input ``` Only clear the form when the operation actually succeeds, unless your product has a specific reason to do otherwise. ### Controlled vs Uncontrolled Forms Uncontrolled fields often work very naturally with Server Action forms because the browser already understands native form submission. Controlled state is useful when the interface needs live React behavior such as: - character counters - dependent inputs - instant previews - complex conditional UI ### Interview-Ready Answer Uncontrolled Action-based forms can be reset naturally after successful submission, while controlled inputs must be reset by updating their React state. If resetting manually, only do it after success; validation failures should normally preserve the user's entered values so they can fix the problem instead of typing everything again.