When working with react js, you will always have to work with State, initial it, change it, and play with it. So that, learn how to reset to the initial state using React hooks is important for developers. How to do it? Let’s go into detail.
Reset to the initial state using React hooks
Solution 1: Use useState
UseState hooks will help you to store value. It also helps you to reassign value. It will be beneficial in this situation.
Example code:
import { useState } from 'react'
import './App.css'
function App() {
const initialValue = 0
const [currentValue, setState]= useState(initialValue)
return (
<div className="App">
</div>
)
}
export default AppHere I create a useState hook with initialValue is 0. In line 5 of the code, when useState is initial current value will be assigned to the value that I pass in useState, which here is 0. And useState also provides setState that helps you to set currentValue every time you call it.
Example:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
function App() {
let initialValue =0
const [currentValue, setState]= useState(initialValue)
setState(1)
console.log(currentValue)
return (
<div className="App">
</div>
)
}
export default AppOutput:
1So you can apply this mechanic and combine it with the condition that you can reassign the current value following your logic.
Example:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
function App() {
let initialValue =0
const [currentValue, setState]= useState(initialValue)
const handleIncrease = ()=>{
setState(currentValue+1)
}
const handleReset = ()=>{
setState(initialValue)
}
return (
<div className="App">
<h1>{currentValue}</h1>
<button onClick={handleIncrease}>Increase 1</button>
<button onClick={handleReset}>Reset Value</button>
</div>
)
}
export default App
Output:
Reset value:
Solution 2: Use useReducer
UseReducer hook is also using like useState hook, but it is beneficial when working with complex logic.
Example:
import { useReducer} from 'react'
import './App.css'
const initialState =0;
function App() {
const reducer =(state,action)=>{
switch (action){
case 'Increase':return state+1
case 'Reset':return state=initialState
}
}
const [currentValue,dispatch]= useReducer(reducer,initialState)
return (
<div className="App">
<h1>{currentValue}</h1>
<button onClick={()=>dispatch('Increase')}>Increase</button>
<button onClick={()=>dispatch('Reset')}>Reset</button>
</div>
)
}
export default AppHere I initial the current value with the initialState variable, then assign dispatch with the reducer function. I add an event to the button that every time I click on that button, each function will be active based on what I pass in dispatch, which is action parameters.
Output:
Summary
In this tutorial, I showed and explained how to reset to the initial state using React hooks. The logic creates a variable that stores your initial value and creates a logic to reset the value. You can work with setState or useReducer hook.
Maybe you are interested:
- react hook useeffect has a missing dependency error
- Clear a timeout or an interval in React with hooks
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm