DEV Community

loading...
Cover image for useReducer Hook for functional components.

useReducer Hook for functional components.

gilbishkosma profile image Gilbish ・2 min read

The useReducer hook comes in handy when you want to separate the state logic from the components. In the official doc of React, they have written it as an alternative to useState.

useReducer hook is usually preferable to useState when you have a complex state.

const [state, dispatch] = useReducer(reducer, initialArg, init);
Enter fullscreen mode Exit fullscreen mode

arguments of useReducer:

1) reducer
A reducer will be a function that takes two arguments.
the first argument is the initialState and the second will be the action. It will return the new state based on the action provided.

2) initialArg
initialArg is the initial state which is passed to the reducer.

3) init (optional)
It's a function that is used to create the initial state lazily. If you pass a third function argument to the useReducer hook, it passes the second argument to that function and uses the return value for the initial state.

Example

Let's create a counter app, in which the count will increase or decrease based on the button we click.

Step1 (create the component)

import React from 'react'
const CounterApp = ({initialCount=0,step=1}) => {
const count = initialCount;
const add = () => console.log('add');
const subtract = () => console.log('subtract');
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}
Enter fullscreen mode Exit fullscreen mode

Step2 (create the reducer function)

const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}
Enter fullscreen mode Exit fullscreen mode

here the state is the current state and dispatch (can also be said as action) is the argument that is passed in the setState. We are checking the type of action passed by the user and based on that we will set the new value. It works same as the reducer of Redux.

Step3 (use the Reducer with our component)

import React , {useReducer} from 'react'

const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}

const CounterApp = ({initialCount=0,step=1}) => {
const [count,setCount] = useReducer(countReducer,initialCount);
const add = () => setCount({type:'ADD',step});
const subtract = () => setCount({type:'SUBTRACT',step});
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}

const App = () => {
  return <CounterApp />
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Out CounterApp is ready. 🎉

We have used the useReducer hook for a simple counter app. I will suggest using the useState hook for simple cases and the useReducer hook for complex cases.
One of the examples for the complex case is if you have more than one state in your app and you have to change all the states at the same time, then, in that case, we can save all the states in an object using the useReducer hook.

Thanks for reading my post. 😄
Let me know if you have any queries.

Discussion (0)

Forem Open with the Forem app