The When and How of the UseReducer React Hook

In every language, some words are definitely used more often than others, this does not negate the fact that the less used words are important and have their reason for existence. In the English language, ‘The’ tops the league tables of most frequently used words, accounting for 5% of every 100 words used, I can confidently say that what “the” is to the English Language, useState is to the ReactHook community and useEffect following closely behind it, like honey after bee. Unfortunately for those two, today is not their day as today, we will be discussing the lesser famous hook called useReducer .

Several hooks are in place for use

What is UseReducer?

If you have ever worked with Redux, then this is not the first time you are hearing about reducers. Basically, a reducer is a pure function that takes the previous state and an action and returns the next state. Usually, the next state is determined by the action to be carried out. Below is a reducer created to double or triple the state, and return the result as the new state.

The useReducer basically functions this way. It accepts the initial state and an action and returns a new state.

How Should I Use It?

Let’s create a React app that shows the age, height, and hobby, at the different stages of a certain programmer’s life :). Using the famous useState hook, this is what is obtainable:

As you can see above, using useState , we define our constants and set the state for each of them to the intended value in three different functions, using three different setState statements.

With useReducer , the following steps will suffice:

1. Import useReducer from React, then go ahead to define the initial state and the reducer function.

2. Define state and dispatch using the useReducer hook, and destructure the state object to define your state variables.

3. Dispatch your actions with the appropriate types.

And that’s all !!!! Our page looks like this:

One last thing, considering the fact that we have our initial state defined separately, we can as well restart the process at any time by returning our initial state from the reducer based on a “restart” action type. This yields:

The entire code for this simple app can be found here.

When Should I Use It?

In the past, I would have talked about multiple re-renders as a reason to ditch useState for useReducer like in our setBabyStagefunction, where we have 3 setStatecalls; but at present, React can batch multiple setState calls in order to trigger just one re-render; so that is not a valid point. However, I would say that in the event that you have a lot of sub-state values or a dependency on the previous state values, useReducer is the most ideal option because it makes your code less buggy, more concise, and easier to understand.

Feel free to leave your comments if any and if you wish to connect, I’m on Twitter @Abiodun Ajibade3.