Reset to the initial State using React hooks

# Reset to the initial State using React hooks

To reset a component to its initial state:

Store the initial state in a variable.
When an event occurs, call the setState() function, passing it the initial state.

App.js

Copied!
import {useState} from 'react';

const initialState = {
  name: '',
  country: '',
  salary: null,
};

export default function App() {
  const [employee, setEmployee] = useState(initialState);

  const updateState = () => {
    setEmployee({name: 'Alice', country: 'Austria', salary: 100});
  };

  // 👇️ Reset to the initial state
  const resetState = () => {
    setEmployee(initialState);
  };

  return (
    <div>
      <button onClick={updateState}>Set state</button>

      <button onClick={resetState}>Reset to initial state</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>
    </div>
  );
}

reset to initial state react

The code for this article is available on GitHub

# Reset to the initial State using the `useReduce` hook

To reset a component to its initial state with the useReducer hook:

Store the initial state in a variable.
Handle a RESET action type in your reducer.
Dispatch an action with type of RESET.

App.js

Copied!
import {useReducer} from 'react';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'RESET':
      return initialState;
    default:
      throw new Error(`Unhandled expression in switch: ${action.type}`);
  }
}

export default function App() {
  const [count, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({
      type: 'INCREMENT',
    });
  };

  // 👇️ Reset to the initial state
  const reset = () => {
    dispatch({
      type: 'RESET',
    });
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>

      <button onClick={reset}>Reset</button>

      <h2>Count: {count}</h2>
    </div>
  );
}

react usereducer reset state

The code for this article is available on GitHub

Regardless if we use the useState hook or useReducer to manage state, we have to store the initial state in a variable in order to reset it.

We declared the initial state outside of the component to avoid re-declaring it every time the component re-renders, but chances are you won't see any noticeable difference in performance.

Unfortunately, there isn't a built-in way for us to reset the state of the component to its initial state, so we have to extract the initial state into a variable.

When you manage state using the useState hook, all you have to do is call your setState function passing it the initial state.

App.js

Copied!
const resetState = () => {
  setEmployee(initialState);
};

With the useReducer hook, you have to add an action handler for the RESET state that returns the initial state.

App.js

Copied!
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    // 👇️ Reset to the initial state
    case 'RESET':
      return initialState;
    default:
      throw new Error(`Unhandled expression in switch: `);
  }
}

And dispatch an action with a type of RESET.

App.js

Copied!
const reset = () => {
  dispatch({
    type: 'RESET',
  });
};

The code for this article is available on GitHub

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Reset to the initial State using React hooks

# Reset to the initial State using React hooks

# Reset to the initial State using the useReduce hook

Borislav Hadzhiev

# Reset to the initial State using the `useReduce` hook