Look at React Hook “useReducer()”

The word “reducer” might evoke images of Redux — but I promise you don’t have to understand Redux to read this blog, or to use the new useReducer hook that comes with the React V16.8.

Managing state in react is one of the main issue you will be face while developing react application. useState is of course one of the most common way to manage and update state in functional react component.

There is also a lots of libraries which offering opinionated ways to manage your entire state like https://redux.js.org/ , Mobx, Recoil and Xstate.

but before jumping to a library to help you manage your state you should be aware of another native way to manage your state:useReducer. in can be very powerful when used in a right way and for the right purpose.in fact its so powerful that the famous Redux library can be thought of as just a big optimized useReducer.

What is useReducer and How it works -

useReducer is a React Hook that give us more control over state management than useState. making it easier to manage complex states , its basic structure is:

const [state, dispatch] = useReducer(reducer, initialState)

Combined with other React Hook such as useContext , it works almost similer to Redux. The difference is that Redux creates a global state container (a store) while useReducer creates an independent state container within our component.

React useReducer can be used to manage state that depends on previous state , and efficiently manage multiple complex states.

useReducer hook takes two arguments inside it first one is reducer function and second is initialState. then it returns an array of two items , the current state and dispatch function .

Let’s see what is the meaning of these terms- initialState , Action object , dispatch and reducer function.

1. Initial State

Initial state is the value the state initialised with .

Let’s see the example -

for increasing and decreasing the value of counter , the initial state would be -

const initialState = {

Counter:0

};

2. Action Object-

An action object is an object that describes how to update the state.

By convention , an action is just a JavaScript object which contains two properties -

1. type: a unique identifier for the type of state transformation you want to perform.
2. payload (optional) : The value that should be used to update some part of the state.

Here is what an action look like-

3. Dispatch Function :

The dispatch function is a special function that dispatches an action object.

The dispatch function is created for your by the useReducer() hook.

when you want to update the state (usually from an event handler or after completing a fetch request) , you just call the dispatch function with the appropriate action object : dispatch(actionObject).

4. Reducer Function:

It is pure function that accept state and action as parameter and returns an updated state.

Conclusion :

This article demonstrated how to handle complex states with useReducer, exploring its use cases and tradeoffs. It’s important to note that no single React hook can solve all our challenges, and knowing what each hook does can help us decide when to use it.

I hope this article help you to understand when to use useReducer and resolved all your doubts ,

if you find this article useful , guys please like and share with your friends and stay connected for more technical blogs.