useReducer

When you have multiple pieces of state that change together, or state transitions that follow strict rules, managing it with several useState calls gets messy. useReducer centralises all state logic into a single pure function — the reducer.

const [state, dispatch] = useReducer(reducer, initialState);

// reducer      → (state, action) => newState
// initialState → the starting value
// state        → current state
// dispatch     → send an action to the reducer

interface State {
  count: number;
  showText: boolean;
}

type Action =
  | { type: "INCREMENT" }
  | { type: "toggleShowText" };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "toggleShowText":
      return { ...state, showText: !state.showText };
    default:
      return state;
  }
};

You never call the reducer directly — you dispatch an action object and React calls the reducer for you. Multiple dispatches in one handler are batched into a single re-render.

// Dispatch a single action
dispatch({ type: "INCREMENT" });

// Dispatch multiple — React batches them
dispatch({ type: "INCREMENT" });
dispatch({ type: "toggleShowText" });

One button dispatches two actions — an increment and a text toggle. Both are batched into a single re-render.