Guide to useReducer in React

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:

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 too.

You can find more information at the following link: useReducer on react.dev