Hook · Complex state
useReducer
Explicit transitions
When the next state depends on the previous state and what happened, useReducer turns the fuzzy logic of multiple setState calls into a named and testable transition.
The reducer shape
(state, action) => newState. Keep the reducer pure: no fetch, no mutation, no Math.random(). If you need effects, fire them after the dispatch.
When it beats useState
When there are several ways to modify the same state, when transition logic repeats across multiple events, or when you want to log/debug each change in a single place.
Common pitfalls
- 01The reducer MUST be pure: no fetch, no side-effect console.log, no random IDs.
- 02Do not mutate state: state.items.push() breaks React. Always return new objects/arrays.
- 03If you store values that rarely change, useReducer can be overkill — useState is enough.
Was this helpful?
Sign in to give feedback