# Guide to useReducer in React

> A practical guide to React's useReducer hook: how it works, when to prefer it over useState, and a complete example for managing complex state.

- Autore / Author: Diego Betto (https://diegobetto.com/about/)
- Pubblicato / Published: 2023-12-06
- URL: https://diegobetto.com/en/react-usereducer/
- Tag: react, hook, useReducer, state, useState

React, the JavaScript library for building user interfaces, offers the powerful `useReducer` hook for advanced state management. In this guide, we'll explore how `useReducer` can improve state management efficiency in complex React applications.

## What is useReducer in React?

`useReducer` is a React hook designed to handle complex state in a more advanced way than `useState`. If your application requires more structured and sophisticated state management, `useReducer` is the ideal choice to improve both performance and code clarity.

## When to use useReducer

The choice between `useState` and `useReducer` depends on the complexity of your state and the nature of the update actions. Consider `useReducer` when you have complex state and non-trivial update actions.
If instead the state you need to update is simpler, like a modal or an accordion being open, you can safely use `useState`.

## How to implement useReducer, a simple example

Using `useReducer` requires defining an initial state and a reducer that handles the update actions.
Here's a practical example:

```jsx
import { useReducer } from "react";

// define the initial state
const initialState = {
  count: 0,
};

// define the reducer, mapping each action to a new state
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // call the `useReducer` hook, which returns a state
  // and the dispatcher that lets us run the actions
  // we defined in the reducer.
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
    </div>
  );
};
```

## Advantages of useReducer

1. **Structured Action Handling**: The reducer offers clearer handling of actions, making the code easier to follow.

2. **Optimized Complex State**: `useReducer` excels at managing complex state, keeping the relevant information easy to index. Nothing stops you from using `useState`, but management usually gets more demanding as the complexity of the state you're handling grows.
   Conversely, when you have to manage simple state, using `useReducer` can turn out overly verbose.

3. **Improved Performance**: In certain scenarios, `useReducer` can produce more efficient code, indirectly contributing to better performance. These are fairly specific scenarios — in most situations these differences aren't noticeable.

## Conclusion: useReducer for Better React Code

`useReducer` is a powerful tool for improving state management in React, making the code more efficient.
The choice between `useState` and `useReducer` should be guided by the complexity of your state and the specific needs of your application.

If instead your use case is sharing state across multiple components, take a look at the guide to [useContext](https://diegobetto.com/react-usecontext/) too.

You can find more information at the following link: [useReducer on react.dev](https://react.dev/reference/react/useReducer)