useReducer Hook for functional components.

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 and you have to change multiple states at the same time.

const [state, dispatch] = useReducer(reducer, initialArg, init);

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>
</>
)
}

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
  }
 }
}

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;

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.

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