When would you choose useReducer over useState?

Question

Accepted Answer

Both useState and useReducer manage state in React components, but they suit different scenarios.

useState is simpler and works well for independent pieces of state with straightforward updates. Use it for toggles, form inputs, counters, and simple values.

useReducer is better when state logic is complex, when the next state depends on the previous state, or when you have multiple sub-values that update together.

Consider useReducer when you have related state transitions. For example, a form with loading, error, and data states benefits from a reducer:

const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true, error: null };
    case 'FETCH_SUCCESS':
      return { loading: false, error: null, data: action.payload };
    case 'FETCH_ERROR':
      return { loading: false, error: action.error, data: null };
  }
};

With useState, you would need three separate setState calls that could get out of sync.

useReducer also helps when state updates are complex. Instead of scattering update logic across event handlers, you centralize it in the reducer. This makes the logic easier to test and reason about.

Another benefit is passing dispatch down through context. dispatch has a stable identity, so child components do not re-render unnecessarily, unlike passing setState callbacks.

As a rule of thumb, start with useState. Switch to useReducer when you find yourself with multiple related setState calls or when the update logic becomes hard to follow.