When would you use useReducer instead of useState?

Question

Accepted Answer

`useReducer` centralizes state transitions in a single **pure reducer function**, instead of scattering many `useState` setters. It's React's built-in version of the Redux pattern. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## How it works You `dispatch` an **action** (a plain object describing an event). React calls `reducer(currentState, action)` and uses the returned object as the new state. The reducer is **pure** (no side effects, no mutation), which makes the logic predictable and unit-testable in isolation. ## When to prefer it over useState - The next state **depends on the previous** state in non-trivial ways. - Several values **change together** (e.g. `count` + `step` + `error`). - Update logic is complex enough that you'd repeat it across handlers. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` has a **stable identity**, so passing it through context or to memoized children doesn't cause re-renders. For simple, independent values, plain `useState` is still clearer.