useReducer: Manage Complex State with Predictable Actions

Why it exists

When component state becomes complex, managing it with multiple useState calls can lead to scattered and hard-to-follow update logic. This makes bugs more likely. useReducer was created to provide a more structured and robust way to handle complex state transitions, making changes more predictable and easier to debug.

The mental model

Think of useReducer as a command center for your component's state. Instead of giving direct, imperative orders to change individual pieces of state (like setFirstName, setLastName), you send a single, descriptive request (a dispatched "action") to the command center (the "reducer"). The reducer then handles all the state changes at once based on that request.

How it works

You call useReducer at the top of your component with a reducer function and an initial state. The hook returns an array containing the current state and a dispatch function. Your reducer function must be pure; it takes the current state and an action object as arguments and returns the next state. To update the state, you call dispatch with an action object from your event handlers. React then runs your reducer, takes the new state it returns, and triggers a re-render.

When to use it

Use useReducer when state logic is complex and involves multiple sub-values, like a multi-step form or a settings panel. It's also ideal when the next state depends on the previous one, as the reducer provides the old state as an argument. This pattern makes it easier to test your state logic in isolation from the component.

When not to use it

For simple, independent state values like a boolean toggle or a single input field, useState is simpler and requires less boilerplate code. Using useReducer for trivial state adds unnecessary complexity. If your update logic is just setSomething(newValue), stick with useState.

One canonical example

A classic example is a counter. The reducer function would look like: function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } }. Your component would then call dispatch({ type: 'increment' }) on a button click to update the count.