How to Reset State in React

To reset state in React, set it back to its initial value, or remount the component with a new key. React preserves state while a component stays at the same position, so the key is the reliable way to start a view from scratch. A third option is lifting the state to a parent that clears it.

Which one to pick depends on whether the component is staying mounted or changing identity. The setter handles a normal clear, and the key handles a change of identity.

Reset with the setter

The simplest reset is calling the setter with the starting value again. For independent values, that is one call per value. Nothing about the component tree changes; only the value does.

App.jsx

function resetForm() {
  setFirstName("");
  setLastName("");
}

Each value returns to its initial state, and React re-renders with an empty form. This works well when the component owns the values and the reset is a user action, like a clear button.

For an object, pass a fresh copy of the starting value rather than mutating the old one. Keeping the initial value in a constant outside the component makes the reset a single call.

Reset an object or array

For a grouped value, reset by passing a fresh copy of the starting value. Keep the initial value in a constant so the reset never reuses the old reference.

App.jsx

const initialForm = { first: "", last: "" };
 
function resetForm() {
  setForm({ ...initialForm });
}

The spread produces a new object each time, so the state is replaced rather than mutated. Reusing the same constant without a copy can be fine if nothing mutates it, but the copy is the safer habit.

Reset by remounting with a key

React preserves state as long as the same component is rendered at the same position in the tree. If the identity of what you are editing changes, that preservation is wrong. A changing key forces a remount.

App.jsx

function Profile({ userId }) {
  return <Form key={userId} />;
}

When userId changes, React sees a different key, unmounts the old Form, and mounts a fresh one with empty state. This is the standard fix for a form that keeps the previous user's text after you switch to another user. The key does not have to be globally unique; it only names the position within its parent.

The same pattern resets a list item when it should start over, and it works for any subtree, not just forms. The full mechanics are covered in preserving and resetting state with keys.

Which approach to use

The table maps each situation to its tool. A clear button is a setter reset, and switching from Alice to Bob is a key reset.

A wizard step that clears several fields at once is a lift-state-up reset. If you are unsure, the key is the more general tool, because it works regardless of how the state is structured.

Common mistakes

The classic bug is assuming state resets because props changed. It does not. The component stays mounted, so its state survives.

App.jsx

function Profile({ userId }) {
  return <Form userId={userId} />;
}

Without the key, switching users keeps the old text in the form. The same surprise happens when a component is conditionally rendered in different positions, so keep its position stable too. The useState guide explains why state lives in the component, not in its props.

What to learn next

If several related fields reset together, grouping them into one object turns the reset into a single setter call. See one state object vs multiple hooks for when that structure helps, and when it makes updates harder.