What is useReducer in React?

New post in the React series about the useReducer hook. Let's know them all in detail.

useState is not the only hook for state management in React. useReducer is a more concrete way of handling complex states in React.

useReducer is one of the more advanced hooks and it may take a while to understand completely. I will try to explain it in the simplest terms.

---

How to use the useReducer hook?

First, you need to understand useReducer is a hook for state management. Now, we need to follow these steps to use the useReducer hook:

• #### Step 1 - Import the useReducer hook

  import {useReducer} from 'react'; 

• #### Step 2 - Declare the useReducer function

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

The useReducer hook takes two parameters

• The reducer function - We will create this in next step and it holds the logic for uploading the state
• Initial state - The initial state of the component/application

It returns an array with exactly two elements. The first element is the state and the second one is a function which we will use to manipulate the state (also known as the "dispatch" function). We have used array destructuring to extract the values in two variables that are state and dispatch.

const [state, dispatch] = useReducer(reducer, initialState)
// State - Variable to store the state
// dispatch - Function to update the state
// reducer - reducer function which will hold the logic for updating the state

• #### Step 3 - Define the reducer function

The reducer function will hold all the logic for updating the state. It will have two parameters, one for holding the current state and another one to hold the instructions for manipulating the state:

const reducer = (state, action) => {
    //function definition
}

We can now create a switch statement to check what instruction we have sent to the reducer function. Based on that action we can perform the changes in our state. Let's see an example and understand this better.

EXAMPLES:

//initial state
const initialState = 0; 

//reducer function
function reducer(state, action) {
    //check the action and perform appropriate operations
    switch (action) {
        case 'increment':
            return state + 1; 
        case 'decrement':
            return state - 1; 
        default: 
            return state; 
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState); 
    return (
    <>
        count: {state}
        {/*use the dispatch function to manipulate the state*/}
        <button onClick={() => dispatch('decrement')}> - </button>
        <button onClick={() => dispatch('increment')}> + </button>
    </>
    ); 
}

---

When to use useReducer hook?

The example which we saw in the previous slide was the most basic example of useReducer. However, useReducer hook is generally used for complex/global state management. In those cases, both the action as well as a state will be objects.

In that case, it is the convention to use a "type" property in the "action" object to make changes to the state. Similarly, the state will also be an object with various other properties.

One of the most common use cases of useReducer is with the context API (will see about this in a later post) for global state management. We will see how to use them together in later posts.

---

😎Thanks For Reading | Happy Coding 📘

Comments

[dastasoft]

Nice summary! For a future post I think it will be useful to show a basic example using Redux vs context/hooks which I think is a common question among react devs.