How To Use useReducer Hook In React JS

Introduction 

In my previous article, we learned what is useState and how to use it to store some data in a component. In this article, we will cover what useReducer hook is and how to use it in our application to store data. So, let’s start.

What is useReducer?

The useReducer Hook is similar to the useState Hook. The useReducer Hook is the better alternative to the useState hook and is generally more preferred over the useState hook when you have complex state-building logic or when the next state value depends upon its previous value or when the components are needed to be optimized.

How to use useReducer?

Let’s create a simple component in our react js app and named it “UseReducerExample.js” as below.

Code

import React   from 'react'
function UseReducerExample(){
    const defaultValue = 0;
    return (
       <div>
            <h3>Maintain state with UseReducer</h3>
            <button>Increment</button>
            <button>Decrement</button>
            <p>{defaultValue}</p>
       </div>
    )
} 
export default UseReducerExample;

Let's try to use this component in App.js file and run the application using “npm start” and see the output.

Now, suppose we want to create a simple application that does increment and decrement and shows value like above.

So in this case whenever we click on increment button initial value should be saved and increase it by 1 and then again save it somewhere. Once we click on decrement, saved value should be decreased by 1 and save again.

We have multiple ways to do it but, in previous article, we saw how we can do it by using useState hook. Now we will try this by using useReducer. It's very simple. So, let’s start.

Now update your UseReducerExample.js component as below.

Code

import React , {useReducer} from 'react'
const reducer=(state, action)=>{
    if(action.type === "Increment")
        return state+1;
    else if(action.type === "Decrement")
        return state-1;
}
function UseReducerExample(){
    const defaultValue = 0;
    const [state, dispatch] =  useReducer(reducer, defaultValue);
    return (
       <div>
            <h3>Maintain state with UseReducer</h3>
            <button onClick ={()=> dispatch({type : "Increment"})}>Increment</button>
            <button onClick ={()=> dispatch({type : "Decrement"})}>Decrement</button>
            <p>{state}</p>
       </div>
    )
} 
export default UseReducerExample;

Explanation

useReducer is a method similar to useState, it takes mainly two arguments. First is reducer and second is initial or default value. It returns two elements of an array, one is state (current/updated state) and dispatch method (dispatch method use to trigger action method based on a type param)

Reducer is a pure function which will take 2 arguments, one is state (previous state) and action (what action has to be performed)

Now, on button click we can use its onCLick method and fire dispatch method by passing it as type and mentioning what has to be done on that button click.

Here we have to perform increment and decrement so in type param we can mention the same which we can use when dispatch will fire the event (line no 3).

That’s it. Now just run the application and click on increment and decrement button to verify it.

Summary

This article covered how to use useReducer hook to update and store data.

Make sure you don't just read through – go build, too.