Used to manage complex or interdependent state in function components, especially when useState becomes unscalable.

useReducer()

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

Manages state transitions through a centralized reducer function and dispatch() actions.

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

Use when:

• State has multiple related fields
• Transitions follow consistent patterns (like a state machine)
• Replacing useState clutter (too many setters)