How to Reset Form in React JS

You submit a task form in a React dashboard, the API saves the new task, and the task appears at the top of the list. But the title, assignee, and due-date fields still show the old values.

I have seen this small issue make otherwise polished admin panels feel unfinished. A good React form reset clears the right values, preserves the right defaults, and gives users a clear signal that their action worked.

This guide shows practical ways to reset a form in React JS using controlled components, useState, and native form behavior.

This Tutorial Covers:

How to Reset a Form in React JS

The best approach depends on whether your inputs are controlled components or uncontrolled components.

A controlled component gets its displayed value from React component state. This is the most common pattern in modern React applications because React controls what users see in every input.

For example, a task dashboard may use a form that creates tasks with these fields:

Task title
Priority
Assignee
Due date

Start by creating one object that holds the initial values for the form.

import { useState } from "react";

const initialFormData = {
  title: "",
  priority: "Medium",
  assignee: "",
  dueDate: "",
};

export default function TaskForm() {
  const [formData, setFormData] = useState(initialFormData);

  return (
    <form>
      {/* Form fields go here */}
    </form>
  );
}

The useState hook stores the current field values in formData. The initialFormData object gives you one reliable place to define what a reset state should look like.

This setup also makes later changes easier. For example, if “Medium” should remain the default priority after every reset, you only need to update it once.

If you are new to passing data into reusable UI pieces, this guide on React props is a useful next step.

Reset a Controlled React Form

In production React apps, I usually use controlled inputs for forms that need validation, conditional fields, server submission, or draft saving.

Each input receives its value from state and updates that state through an event handler.

import { useState } from "react";

const initialFormData = {
  title: "",
  priority: "Medium",
  assignee: "",
  dueDate: "",
};

export default function TaskForm() {
  const [formData, setFormData] = useState(initialFormData);

  function handleChange(event) {
    const { name, value } = event.target;

    setFormData((currentData) => ({
      ...currentData,
      [name]: value,
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();

    console.log("Saving task:", formData);

    setFormData(initialFormData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Task title
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          placeholder="Add task title"
        />
      </label>

      <label>
        Priority
        <select
          name="priority"
          value={formData.priority}
          onChange={handleChange}
        >
          <option>Low</option>
          <option>Medium</option>
          <option>High</option>
        </select>
      </label>

      <label>
        Assignee
        <input
          type="text"
          name="assignee"
          value={formData.assignee}
          onChange={handleChange}
          placeholder="Enter assignee name"
        />
      </label>

      <label>
        Due date
        <input
          type="date"
          name="dueDate"
          value={formData.dueDate}
          onChange={handleChange}
        />
      </label>

      <button type="submit">Create task</button>
    </form>
  );
}

I executed the above example code and added the screenshot below.

The handleChange function runs whenever a user types or selects a value. It uses the spread operator (...) to copy the existing object and then updates only the changed field.

The reset happens here:

setFormData(initialFormData);

React receives the original field values and renders the inputs again with those values. The text fields become empty, while the priority field returns to “Medium.”

This approach works especially well for task managers, CRM screens, support forms, data-entry pages, and settings panels. You can learn more about handling user actions in React event handlers.

Why event.preventDefault() matters

Browsers normally submit an HTML form by reloading the page. In a React application, that reload interrupts your JavaScript logic and removes the current UI state.

This line stops the browser’s default form submission:

event.preventDefault();

It lets React validate the fields, call an API, show a success message, update a task list, and reset the form without a page refresh.

Reset Form After a Successful API Call

You should not always reset a form immediately. If a request fails, clearing the entered values forces users to type everything again.

Instead, wait until your API confirms that it saved the data successfully.

async function handleSubmit(event) {
  event.preventDefault();

  try {
    const response = await fetch("/api/tasks", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    if (!response.ok) {
      throw new Error("Could not create the task.");
    }

    setFormData(initialFormData);
  } catch (error) {
    console.error(error.message);
  }
}

This code sends the current formData to your backend. It resets the inputs only after the server returns a successful response.

That sequence matters in API-driven dashboards. Users keep their entered values if the network drops, the server rejects the request, or validation fails.

If API data is not appearing as expected after submission, review this guide on fixing React API data that does not display.

Show a clear success message

A reset can feel abrupt when users do not see feedback. Add a message so they know the task was saved.

import { useState } from "react";

const initialFormData = {
  title: "",
  priority: "Medium",
  assignee: "",
  dueDate: "",
};

export default function TaskForm() {
  const [formData, setFormData] = useState(initialFormData);
  const [message, setMessage] = useState("");

  function handleChange(event) {
    const { name, value } = event.target;

    setFormData((currentData) => ({
      ...currentData,
      [name]: value,
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();

    setFormData(initialFormData);
    setMessage("Task created successfully.");
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          placeholder="Add task title"
        />

        <button type="submit">Create task</button>
      </form>

      {message && <p>{message}</p>}
    </>
  );
}

I executed the above example code and added the screenshot below.

The JSX expression {message && <p>{message}</p>} renders the message only when message contains text. This gives users immediate feedback without adding unnecessary UI.

Add a Reset Button in React

A submit reset handles the successful-save scenario. A separate reset button helps when users decide to discard their unsaved changes.

Use a button with type="button" for this job.

function handleReset() {
  setFormData(initialFormData);
  setMessage("");
}

Then add it inside the form.

<button type="submit">Create task</button>
<button type="button" onClick={handleReset}>
  Reset form
</button>

The type="button" value is important. A <button> inside a form acts as a submit button by default. Without type="button", clicking “Reset form” could accidentally run handleSubmit.

The reset function returns every field to the values in initialFormData. It also clears the success message so the form returns to its clean starting state.

Pro Tip: I’ve found that keeping initialFormData outside the component prevents accidental resets to incomplete values. Always create a fresh state object with the spread operator if you later change nested form data.

Reset Form in React JS With form.reset()

You can also reset an HTML form through the browser’s native reset() method.

This works best with uncontrolled inputs. An uncontrolled input lets the DOM manage its value instead of React state.

import { useRef } from "react";

export default function QuickTaskForm() {
  const formRef = useRef(null);

  function handleReset() {
    formRef.current.reset();
  }

  return (
    <form ref={formRef}>
      <input type="text" name="title" placeholder="Add task title" />
      <input type="date" name="dueDate" />

      <button type="button" onClick={handleReset}>
        Reset form
      </button>
    </form>
  );
}

The useRef hook stores a reference to the actual <form> element. Calling formRef.current.reset() tells the browser to restore every field to its HTML default value.

This method is quick for small search forms, simple filters, and one-off forms that do not need live validation.

However, do not rely on form.reset() for inputs whose value comes from React state. React will render those values again because the state did not change.

For controlled forms, reset the state. For uncontrolled forms, use the native form reset method.

Reset Individual Fields Instead

Some forms should keep certain values after submission. A task dashboard may retain the selected assignee while clearing only the task title and due date.

Update only the fields that need resetting.

function handlePartialReset() {
  setFormData((currentData) => ({
    ...currentData,
    title: "",
    dueDate: "",
  }));
}

This is an immutable update, which means you create a new object instead of changing the old state object directly. React can reliably detect the new object and update the interface.

Avoid code like this:

formData.title = "";
setFormData(formData);

That code changes the existing state object directly. React state should be treated as read-only. Direct mutation can lead to missing updates, stale UI values, and difficult debugging.

The same rule applies when you work with arrays in forms, such as tags, selected users, or checklist items. Create a new array rather than changing the existing React state array in place.

Reset a Form When Props Change

Edit forms often receive a task from a parent component through props. When the user selects another task, you may need to reset the form to match the newly selected record.

import { useEffect, useState } from "react";

export default function EditTaskForm({ selectedTask }) {
  const [formData, setFormData] = useState(selectedTask);

  useEffect(() => {
    setFormData(selectedTask);
  }, [selectedTask]);

  return (
    <form>
      <input
        name="title"
        value={formData.title}
        onChange={(event) =>
          setFormData({
            ...formData,
            title: event.target.value,
          })
        }
      />
    </form>
  );
}

The useEffect hook runs after React receives a different selectedTask prop. It copies that task into local form state so the form shows the newly selected record.

This pattern is useful in admin panels with edit drawers, detail pages, modal forms, and table row actions. Keep the dependency array accurate so React runs the effect only when the selected task changes.

Things to Keep in Mind

Reset controlled inputs through state: If an input uses a value prop, update the state that supplies that value. Calling only form.reset() will not reliably clear it.
Keep initial values in one object: Define an initialFormData object rather than repeating empty strings across multiple functions. This makes reset behavior consistent.
Avoid direct state mutation: Never change formData.title or other state properties directly. Create a new object with the spread operator so React can detect the update.
Use type="button" for reset buttons: A button inside a form submits by default. Set its type explicitly when it should only clear values.
Reset after confirmed saves: Wait for an API call to succeed before clearing user input. This protects users from losing data after a failed request.
Preserve useful defaults: A reset does not always mean every value becomes empty. Keep sensible defaults, such as a default task priority or active project.

Frequently Asked Questions

How do I reset a form in React?

For a controlled React form, set its component state back to an initial values object. For example, use setFormData(initialFormData) after a successful submit or when a user clicks a reset button.

Why does form.reset() not clear my React inputs?

Your inputs likely use React state through a value prop. The browser clears the DOM fields briefly, but React renders the values from state again. Reset the related state instead.

Can I reset only one field in a React form?

Yes. Create a new state object and replace only the field you want to clear. This works well when you want to keep filters, selected users, or default choices.

Should I use controlled or uncontrolled inputs?

Use controlled inputs when you need validation, instant UI updates, API submission, conditional fields, or reliable reset behavior. Use uncontrolled inputs for smaller forms where the DOM can manage input values.

How do I reset a form after submitting data to an API?

Call your API first, check that the response succeeded, and then reset the form state. Do not clear the form before you know the server saved the data.

Can I use a reset button in a React form?

Yes. Use <button type="button"> and attach an onClick handler that resets state. This prevents the reset button from triggering form submission.

Resetting a form in React JS becomes simple once you know where each input gets its value. For controlled forms, reset the state with a clean initial object; for uncontrolled forms, native form.reset() can work well. I hope you found this article helpful.