How to reset form in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Resetting forms after submission or on user action is a common requirement in React applications for better user experience. As the creator of CoreUI with over 11 years of React experience since 2014, I’ve implemented form reset functionality in hundreds of production forms. The most effective solution is to reset your state values back to their initial state or use a ref with the native form reset method. This approach ensures all form fields return to their default values cleanly.
Reset form state by setting all field values back to their initial state.
const [formData, setFormData] = useState({
email: '',
password: '',
username: ''
})
const handleSubmit = (e) => {
e.preventDefault()
console.log('Submitted:', formData)
// Reset form
setFormData({
email: '',
password: '',
username: ''
})
}
return (
<form onSubmit={handleSubmit}>
<input
type='email'
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<input
type='password'
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<button type='submit'>Submit</button>
</form>
)
After form submission, calling setFormData() with the initial empty object resets all controlled inputs. For forms with many fields, store the initial state in a constant and reuse it for resetting. You can also use the native form.reset() method by attaching a ref to the form element, which works well for uncontrolled components but requires additional handling for controlled inputs.
Best Practice Note
This is the same form reset pattern we use in CoreUI React components for consistent behavior. For complex forms, consider creating a custom useForm hook that handles both state management and reset functionality, making your forms more maintainable and reusable across your application.
