Hooksintermediate
useReducer for Complex State Logic
Learn when useReducer is a better fit than useState for managing state transitions with multiple related fields or actions.
useReducer(reducer, initialState) is an alternative to useState for managing state via a reducer function — a pure function that takes the current state and an action, and returns the next state. It returns the current state and a dispatch function used to send actions rather than directly setting values.
useReducer is like sending prescribed order forms to a factory line instead of everyone on the floor improvising changes to the product directly — every change goes through the same assembly instructions (the reducer), so the outcome for a given order (action) is always predictable and traceable.
Key Concepts
1
This pattern shines when a component's state has multiple sub-values that change together in response to distinct 'events,' or when the next state depends in a non-trivial way on the previous state and the action. Centralizing transition logic in one reducer function makes those transitions easier to test in isolation and easier to reason about than scattered setState calls across many handlers.
setState
2
useReducer also makes state updates more predictable to trace: since every state change flows through the same reducer function and is triggered by a named, serializable action object, you can log every dispatched action for debugging, similar to how Redux's architecture works (indeed, useReducer is essentially Redux's core pattern built into React).
useReducer
3
Interviewers often ask candidates to convert a component with several related useState calls and tangled update logic into a single useReducer, checking whether they can design a clear action shape and keep the reducer function pure (no side effects, no mutation of the existing state object).
useStateuseReducer