Reset to the initial state in React
To reset to the initial state in React:
- Create a variable with initial values.
- 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.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
React Hook is Called Conditionally
Programmatically update query params in React Router
How to check internet connection(online or offline) in React
How to use Profiler API in React to measure render performance
Get the Mouse Position (coordinates) in React
How to create a scroll to top button in React
Build password strength checker in React
The style prop expects a mapping from style properties to values, not a string
Too many re-renders. React limits the number of renders to prevent an infinite loop
Explore All Blogs