How To Reset To The Initial State Using React Hooks

Reset to the initial State using React hooks

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 App

Here 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 App

Output:

1

So 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 App

Here 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:

Animated GIF - Find & Share on GIPHY

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:

Leave a Reply

Your email address will not be published. Required fields are marked *