Centralize complex state updates
A component has several related state transitions, such as adding, editing, and removing items.
React 19+ · Type Alias
Reducer
Reducer is the function passed to useReducer to define how actions transform current state into next state. React calls it during dispatch and uses its return value for the next render.
How it works
Reducer is the function shape used by useReducer: it accepts the current state and an action, and returns the next state. React invokes it after dispatch, stores the returned state, re-renders the component, and updates the UI.
Syntax
(state: State, action: Action) => StateParameters
| Name | Type | Description |
|---|---|---|
state | State | The current state value supplied to the reducer. |
action | Action | The dispatched action describing the requested update. |
Returns
The next state, with the same State type as the reducer's state input.
Key points
- A reducer contains the rules for transforming state in response to dispatched actions.
- React invokes the reducer with the latest state and the action supplied to dispatch.
- The reducer's output becomes the component's next state.
- After reduction, React stores the result, renders with it, and refreshes the visible interface.
Common mistakes
- Keep reducers pure: do not perform side effects, mutate the existing state, or return an unrelated result.
- The hook that consumes a reducer must be called at the top level, never inside loops or conditions.
Example: Typed reducer with useReducer
type Reducer<State, Action> = (state: State, action: Action) => State;
function Counter() {
const [count, dispatch] = useReducer<Reducer<number, { type: 'increment' | 'decrement' }>>(
(state, action) => action.type === 'increment' ? state + 1 : state - 1,
0
);
return (
<button onClick={() => dispatch({ type: 'increment' })}>
Count: {count}
</button>
);
}This reducer receives the current state and an action, then returns the next state used by useReducer.
When to use it
Represent updates as actions
Event handlers should describe user intent without duplicating transition logic.
Type state transitions
A reducer's state and action shapes need compile-time guarantees.
Interview questions
QWhat is a reducer in React?
A reducer is a function that receives the current state and an action, then returns the next state. In React, useReducer passes the current state and dispatched action to it, stores the result, and re-renders the component.
Follow-up: What makes a reducer suitable for React state updates? It must be pure, deterministic for the same inputs, and must return the complete next state rather than mutating the existing one.
QHow does dispatch interact with a reducer?
useReducer returns exactly two values: the current state and a dispatch function. Dispatching an action causes React to calculate the next state through the reducer and trigger a re-render.
Follow-up: Why use a reducer instead of several setters? A reducer centralizes update rules, which is useful when state transitions are related or there are multiple action types.
QWhat types can a reducer's state and action have?
The reducer and action types are application-defined; React does not restrict their types. The reducer still needs to accept state and action arguments and return the next state.
Follow-up: How is initial state handled? useReducer uses initialArg directly unless an optional init function is supplied, in which case it uses init(initialArg).
Related
useReduceruseStatedispatchuseOptimistic