useReducer Hook in React
Tags: react, javascript, webdev, hooks
Published: 2022-05-10 13:23:07

Welcome back again!

This is the fifth blog in the **React Hook** series, where we're learning about different hooks used in React, and today's hook is the `useReducer` hook. Before we get started, I'd recommend reading the last blogs of this series [React Hooks](https://vanshsharma.hashnode.dev/series/react-hooks). Though this hook is entirely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.

## What is useReducer Hook
To handle the complex state in our application, we use the `useReducer` hook. It is the same as the `useState` hook, but instead, it is used to handle the states where we have to keep track of the complex states which rely on the complex logic.

> Syntax:

>  useReducer(reducerFn, initialState )

> - reducerFn is the function that contains the logic to handle the manipulation of our state.
> - initialState is the initial state value of our state. It is primarily objects while using the `useReducer`. 

`useReducer` hooks return the two values:

> const [ state, dispatch ] = useReducer ( reducerFn, initialState )
- the ***state*** is  the value of the current state
- ***dispatch***  is the method that will be used to call our `reducerFn`.

## Understand useReducer by Example

In the following example, we will create a simple app that will display the user's _Name_ and _Account Number_. We will be using `useReducer` for this.


### Step 1 => Import the  useReducer Hook
Import the `useReducer` hook and define it in the component.

```
import React, { useReducer } from "react";

const UseReducer = () => {
  const [userData, dispatchData] = useReducer(userReducer, {
    userName: "Please Login!",
    userAccount: null
  });
};
```
Here `userData` will be our value of the state then, and the initial value of the state will be an object with properties `userName` and `userAccount`.
`dispatchData` will be the method to call the `userReducer` function, which we will define in the coming section.

### Step 2 => Define userReducer function:
We can define the `userReducer` function outside our component since all the values will be passed using the `dispatchData` method.

```
// Reducer function

const userReducer = (state, action) => {
  if (action.type === "LOGIN") {
    return {
      userName: action.data.name,
      userAccount: action.data.account
    };
  }
  if (action.type === "LOGGED_OUT") {
    return {
      userName: "You are logged out!",
      userAccount: null
    };
  }
};

```
The `userReducer` function will take two arguments _state_ and _action_. _state_ is the value of the state then, and _action_ is used to check for what action which _if condition_ to render, and this `type` will be passed by the `dispatchData` method that we will define in the coming section.

### Step 3 => Add the UI for the Application

We will create the UI for the application that will show the `userName` and `userAccount` numbers along with two buttons. One of them is to handle the login function and will call the `loginHandler` function once clicked, and the other button will handle the `logoutHandler` function.
Here is how the code for the UI will look like:

```
return (
    <div className="component">
      <p>{userData.userName}</p>
      <p>{userData.userAccount}</p>
      <div className="btns">
        <button onClick={loginHandler}>Login</button>
        <button onClick={logoutHandler}>Logout</button>
      </div>
    </div>
  );

```

### Step 4 => Define the loginHandler and logoutHandler functions
`loginHandler` and `logoutHandler` functions will use the `dispatchData` method to pass the object with property `type` and user details. The `type` will have the value `LOGIN` and which we will use in our `userReducer` function to call the specific if statement according to the value of the `type`.

```
// Login Handler
  const loginHandler = () => {
    dispatchData({
      type: "LOGIN",
      data: {
        name: "Hello Vansh Sharma",
        account: "Your account number is: 123456"
      }
    });
  };

  // Logout Handler
  const logoutHandler = () => {
    dispatchData({
      type: "LOGOUT"
    });
  };

```
Combining the above all code snippets in the following codesandbox we get the following application:
{% embed https://codesandbox.io/embed/usereducer-d47vmc?fontsize=14&hidenavigation=1&theme=dark %}


> Check the `UseReducer.js` to understand more.

### When to use useReducer

As you can see the, setting up `useReducer` is more lengthy than using the `useState` hook; therefore prefer using the `useReducer` only if the state of the component depends on the complex function or the state of the component is complicated, like an object with many properties.

That's all for this blog.  Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the `useCallback` hook that can be used to memorize the function.
Feel free to leave your valuable feedback in the comments below.


To learn more about React, JavaScript, and Web development, follow me on :
[![](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Vanshsh2701) [![](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/vanshsharma27/) 

Reference: [W3Schools](https://www.w3schools.com/react/react_usereducer.asp)