How to Reset Form in React: Simple Methods Explained

To reset a form in React, you can clear the state values that control the form inputs by setting them back to their initial values using useState. Alternatively, you can use a ref to call the native reset() method on the form element.

Syntax

There are two common ways to reset a form in React:

• Controlled components: Reset the state variables that hold input values.
• Uncontrolled components with ref: Use a ref to access the form DOM node and call reset().

Example syntax for controlled reset:

const [value, setValue] = useState('');

const resetForm = () => {
  setValue('');
};

Example syntax for uncontrolled reset:

const formRef = useRef(null);

const resetForm = () => {
  formRef.current.reset();
};

jsx

import React, { useState, useRef } from 'react';

// Controlled reset example
function ControlledForm() {
  const [name, setName] = useState('');

  const resetForm = () => {
    setName('');
  };

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter name"
      />
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

// Uncontrolled reset example
function UncontrolledForm() {
  const formRef = useRef(null);

  const resetForm = () => {
    formRef.current.reset();
  };

  return (
    <form ref={formRef}>
      <input type="text" name="name" placeholder="Enter name" />
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

Example

This example shows a controlled form with a text input and a reset button. When you type in the input, the state updates. Clicking the reset button clears the input by resetting the state to an empty string.

jsx

import React, { useState } from 'react';

export default function ResetFormExample() {
  const [email, setEmail] = useState('');

  const handleReset = () => {
    setEmail('');
  };

  return (
    <div>
      <form>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="Enter your email"
          aria-label="Email input"
        />
        <button type="button" onClick={handleReset}>Reset</button>
      </form>
      <p>Current input: {email}</p>
    </div>
  );
}

Output

A form with an email input and a Reset button. Typing updates the text below. Clicking Reset clears the input and the text below.

Common Pitfalls

1. Forgetting to set button type to button: Without this, the button defaults to submit and may reload the page.

2. Trying to reset uncontrolled inputs by changing state: If inputs are uncontrolled (no value prop), resetting state won't clear them.

3. Not using ref correctly for uncontrolled forms: The ref must be attached to the <form> element to call reset().

jsx

/* Wrong: button without type causes form submit */
<button onClick={resetForm}>Reset</button>

/* Right: specify type="button" to prevent submit */
<button type="button" onClick={resetForm}>Reset</button>

/* Wrong: uncontrolled input won't reset by state */
const [value, setValue] = useState('');
<input type="text" defaultValue="" />

/* Right: use ref to reset uncontrolled form */
const formRef = useRef(null);
<form ref={formRef}>
  <input type="text" name="name" />
</form>
<button type="button" onClick={() => formRef.current.reset()}>Reset</button>

Quick Reference

Resetting forms in React cheat sheet:

Method	How it works	When to use
Controlled reset	Set state variables back to initial values	When inputs are controlled with value and onChange
Uncontrolled reset	Use ref to call form.reset()	When inputs use defaultValue or no state
Button type	Use type="button" on reset buttons	Prevent form submission on reset

Method	How it works	When to use
Controlled reset	Set state variables back to initial values	When inputs are controlled with value and onChange
Uncontrolled reset	Use ref to call form.reset()	When inputs use defaultValue or no state
Button type	Use type="button" on reset buttons	Prevent form submission on reset

Key Takeaways

Reset controlled forms by setting state variables back to their initial values.

Use a ref and the native reset() method for uncontrolled forms.

Always set reset buttons to type="button" to avoid unwanted form submission.

Controlled inputs require state updates to clear their values.

Uncontrolled inputs reset only via form.reset() or manual DOM manipulation.