back to all posts

React Hooks Tutorials -7

by Nabendu Biswas / December 18th, 2020

#react #beginners #hooks
Series: React-Hooks

Welcome to part-7 of the series. We will learn about useReducer hook in this part.

useReducer hook

It is mainly used for state management. The code and the logic is similar to reducers used in Redux.

We will learn with an example. So, go ahead and create a new react project with the below command.

    npx create-react-app reducer-hook

useReducer-Simple state and action

We will implement an simple counter with useReducer hook. Create a new folder components inside src folder. Inside it create a file CounterOne.js and put the basic content in it.

Here, we have three buttons for increment, decrement and reset. In the useReducer, we need initialState and the reducer function. So, we will set the initialState to 0 and create a reducer function.

The syntax of the reducer function, is exactly similar to the redux counterpart. Here, we are passing the state and action as parameters. Inside a switch statement, we are incrementing, decrementing or resetting the state.


Similar, to useState the useReducer also returns a pair of values, which we can get hold of using array destructuring. We have a count and a dispatch method. This dispatch method allows us to execute the code corresponding to a particular action.

We are using the dispatch to send the action to the reducer function, with the respective value.


Now, we need to add the component CounterOne in App.js file.


Now, head over to localhost and the buttons works as expected.

Work as expectedWork as expected

useReducer-Complex state and action

We will implement the same counter with complex state and action, where both of them will be objects. So, it is quite similar to what we use in Redux.

Create a new file CounterTwo.js inside the components folder. It is almost similar to CounterOne.js, only the updated code is highlighted. We are basically changing both state and action to objects here.


Now, include it in App.js and after that in localhost we will get the same output.

Same outputSame output

Now, the obvious question is the advantage of this pattern over the earlier pattern.

The first case which we will look on is to have a value action to increment or decrement with any value. So, we have a value key in the action object. We are creating two new buttons for the same.

First caseFirst case

And now we can see all in action at localhost.


In the next case, we want to maintain two different counters. We are creating a new counter secondCounter in the initialState. Now, we have two new cases as increment2 and decrement2, which will use the secondCounter. Also notice the …state been returned in all case. This is required or else all the state variables, won’t be updated.

After that we are showing the new counter in the return and also created two new buttons for the new counter.

Two counterTwo counter

Now, when we move to localhost, we can see the new counter in action.

Counter 2Counter 2

This completes part-7 of the series.

You can find the code for the same in this github repo.

Nabendu Biswas