`useReducer`

Manages component state with a reducer function and dispatched actions.

Since React 16.8 Spec ↗

Syntax

const [state, dispatch] = useReducer(reducer, initialArg, init?)

Parameters

Name	Type	Required	Description
`reducer`	`function`	Yes	Pure function (state, action) returning the next state.
`initialArg`	`any`	Yes	Value used to compute the initial state.
`init`	`function`	No	Optional lazy initializer called with initialArg to produce initial state.

Returns

array — A pair: the current state and a dispatch function.

Examples

function reducer(state, action) {
  switch (action.type) {
    case 'inc': return { count: state.count + 1 };
    default: return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

dispatch({ type: 'inc' });

Notes

Prefer useReducer over useState when state transitions are complex or the next state depends on multiple values. The reducer must be pure and return a new state object for changes. dispatch has a stable identity across renders.