Reset to the initial State using React hooks

avatar

Borislav Hadzhiev

Last updated: Apr 28, 2022

banner

Photo from Unsplash

Reset to the initial State using React hooks #

To reset a component to its initial state:

  1. Store the initial state in a variable.
  2. When an event occurs, call the setState() function, passing it the initial state.
App.js
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 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

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

  1. Store the initial state in a variable.
  2. Handle a RESET action type in your reducer.
  3. Dispatch an action with type of RESET.
App.js
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 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

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
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
function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; // 👇️ reset to initial state case 'RESET': return initialState; default: throw new Error(`Unhandled expression in switch: `); } }

And dispatch an action with type of RESET:

App.js
const reset = () => { dispatch({ type: 'RESET', }); };
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.