Reset to the initial state in React

To reset to the initial state in React:

1. Create a variable with initial values.
2. When reset is required, pass the initial value into setState() function.

Reset to initial state in functional component

To reset a state to its initial state in the functional component, create a variable with initial values in the component body first. Then initialize the state with this variable. When a state reset is required, pass the variable into setState() function. Let us explain the below example.

First, we have to create a variable initialCount with initial values as:

const initialCount = 0;	

Next, we invoked the resetCount function when we need to reset our state count.

const resetCount = () => {
    setCount(initialCount);
}

Our final code will be like this:

import {useState} from 'react';

function App() {
  	const initialCount = 0;	
  	const [count, setCount] = useState(initialCount);
  		
  	const resetCount = () => {
    	setCount(initialCount);
  	}
  	const increment = () => {
    	setCount(count+1);
  	}
  	return (
    	<div className="App">
      		<label>Count: {count}</label><br/>
      		<button onClick={resetCount}>Reset</button>
      		<button onClick={increment}>Increment</button>
    	</div>
  	);
}

export default App;

Reset to initial state in Redux

In redux, we can use a similar approach we have done in the functional component. The below example shows how to reset the state in redux.

In this example, we are using the redux toolkit.

First, we created a variable to store the first values as:

const initialState = {
	count: 0,
}

Then we have added resetCount action which reset the count state into the initial state as:

resetCount: (state) => {
	state.count = initialState.count;
}

Our final code will be like this:

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
	count: 0,
}

export const counterSlice = createSlice({
  	name: 'counter',
  	initialState,
  	reducers: {
    	increment: (state) => {
      		state.count += 1
    	},
    	resetCount: (state) => {
      		state.count = initialState.count;
    	}
  	},
})

export const { increment, resetCount } = counterSlice.actions

export default counterSlice.reducer

Reset to the initial state in a class component

The below code shows how to reset the state to its initial state in the class component.

import {Component} from 'react'

const initialState = {
  count:0
};
class App extends Component {
  	constructor(props) {
      	super(props)
      	this.state = initialState;
  	}
  	increment = () => {
    	this.setState({...this.state, count: this.state.count+1});
  	}
  	resetCount = () => {
      	this.setState(initialState);
  	}
  	render(){
    	return (
      		<>
          		<label>Count: {this.state.count}</label><br/>
      			<button onClick={this.resetCount}>Reset</button>
      			<button onClick={this.increment}>Increment</button>
      		</>
    	)
  	}
}

export default App;

Conclusion

To reset to the initial state in React, store the initial state in a variable and when reset is required, pass that variable to setState() function.