How to Reset to Initial State with React Hooks?

Resetting our components to their initial states is something that we want to do often.

In this article, we’ll look at how to do with components that are created with React hooks.

Resetting States to Initial State

To reset states of a component to their initial state, we can store our states in one object state.

Then we can reset them all at once easily.

For instance, we can write:

import { useState } from "react";

const initialState = {
  username: "",
  email: "",
  password: "",
  passwordConfirmation: ""
};

export default function App() {
  const [
    { username, email, password, passwordConfirmation },
    setState
  ] = useState(initialState);

  const clearState = () => {
    setState({ ...initialState });
  };

  const onChange = (e) => {
    const { name, value } = e.target;
    setState((prevState) => ({ ...prevState, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setTimeout(() => {
      clearState();
    }, 1000);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Username:
          <input value={username} name="username" onChange={onChange} />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input value={email} name="email" onChange={onChange} />
        </label>
      </div>
      <div>
        <label>
          Password:
          <input
            value={password}
            name="password"
            type="password"
            onChange={onChange}
          />
        </label>
      </div>
      <div>
        <label>
          Confirm Password:
          <input
            value={passwordConfirmation}
            name="passwordConfirmation"
            type="password"
            onChange={onChange}
          />
        </label>
      </div>
      <button>Submit</button>
    </form>
  );
}

We have the initialState object with the initial state of our sign up form.

Then we call useState in App to create the object state.

Next, we create the clearState function to reset the state by calling the setState state setter function with a copy of the initialState .

Making a copy lets React know that it has to update the state and re-render.

The handleSubmit function calls e.preventDefault to do client-side submission.

Then we call clearState in the setTimeout callback to reset the state to the initial state.

And finally, we have the form inputs to enter all the data.

value is set to the properties.

And onChange is set to the onChange function, which calls setState with a callback that returns a copy of the state and the new property value to update the object state.

This way, the form inputs are filled with what we entered.

Conclusion

We can reset a component to their initial state easily if we store our states in one object.