useReducer
useReducer is an alternative to useState for complex state logic. It takes a reducer function (state, action) => newState and an initial state, returning [state, dispatch]. You update state by dispatching action objects.
useReducer is a vending machine — you insert a coin (dispatch an action), the machine processes it internally (reducer), and out comes your snack (new state). You never reach inside the machine.
useReducer shines when state transitions depend on multiple values or the next state depends on the previous state in complex ways. The reducer is a pure function — given the same state and action, it always returns the same result, making it easy to test. dispatch is identity-stable (never changes reference), so it's safe to pass down without useCallback. It's the React equivalent of Redux's reducer pattern without the external store.
React calls the reducer during rendering to compute the next state, so it must be pure — no API calls, no mutations of external variables. In strict mode, React double-invokes reducers to catch impurities. useReducer can be combined with Context to create a mini state management system: provide dispatch via context so deep children can update state without prop drilling. For complex forms, a reducer with action types like 'SET_FIELD', 'VALIDATE', 'RESET' is far cleaner than multiple useState calls.
useReducer handles complex state transitions through a pure reducer function. I dispatch actions instead of calling setters directly, which makes state logic testable and predictable. The dispatch function is referentially stable, so it's great for passing through context without causing re-renders. I reach for it over useState when state has multiple sub-values or when transitions are complex.
Mutating state inside the reducer instead of returning a new object. Reducers must be pure — always return new state objects. React won't detect mutations since it checks reference equality.