Q159: useReducer and Complex State Transitions

What Interviewers Want To Evaluate

This question checks whether you know when state logic should become explicit. Interviewers want reducers, actions, immutable updates, lazy initialization, dispatch stability, state machines, complex forms, undo flows, and when useState is still better.

Senior answers should connect reducers to predictable transitions and testability.

Short Interview Answer

useReducer manages state through a reducer function and dispatched actions. It is useful when state transitions are complex, when next state depends on action type, or when several state fields change together. Reducers make transitions explicit and easier to test. useState is better for simple independent values. A reducer should be pure and return new state without mutating the previous state.

Detailed Interview Answer

useReducer looks like this:

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

The reducer receives current state and an action.

function reducer(state, action) {
  switch (action.type) {
    case "opened":
      return { ...state, isOpen: true };
    default:
      return state;
  }
}

Why Reducers Help

Reducers centralize transition logic.

This helps when state has:

multiple related fields
many event types
conditional transitions
undo or redo
wizard steps
async status states
validation states
complex form behavior

Instead of scattering many setters, actions describe what happened.

Reducer Purity

A reducer should be pure.

It should not:

mutate previous state
perform network requests
read random values
write local storage
track analytics

Side effects belong in event handlers, effects, or external action orchestration.

Action Design

Actions should describe events.

dispatch({ type: "field_changed", field: "email", value });
dispatch({ type: "submitted" });
dispatch({ type: "submit_failed", error });

Good action names make state transitions easier to debug.

Complex Form Example

function formReducer(state, action) {
  switch (action.type) {
    case "field_changed":
      return {
        ...state,
        values: {
          ...state.values,
          [action.field]: action.value,
        },
        touched: {
          ...state.touched,
          [action.field]: true,
        },
      };
    case "submitted":
      return { ...state, status: "submitting" };
    default:
      return state;
  }
}

The related values update together.

Lazy Initialization

useReducer supports lazy initialization.

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

This is useful when initial state creation is expensive or derived from props once.

Dispatch Stability

The dispatch function identity is stable.

This makes it safe to pass down without wrapping in useCallback in many cases.

Children can dispatch actions without receiving many individual setter functions.

useState vs useReducer

Use useState when:

state is simple
updates are independent
transition logic is small
readability is better

Use useReducer when:

state fields are related
transitions have names
logic is complex
testing reducer separately helps
actions are easier to log

Common Mistakes

A common mistake is putting side effects inside the reducer.

Another mistake is using a reducer for tiny state where useState is clearer.

Another mistake is mutating nested state and returning the same object.

Senior Trade-Offs

Reducers improve structure but add ceremony.

For very complex flows, a state machine may be clearer than a large reducer with many implicit transition rules.

Choose the smallest model that makes invalid states hard to create.

Code or Design Example

function modalReducer(state, action) {
  switch (action.type) {
    case "open":
      return { mode: "open", itemId: action.itemId };
    case "close":
      return { mode: "closed" };
    default:
      return state;
  }
}

This prevents mixed states like isOpen: false with an active itemId.

Debugging Workflow

When reducer state is wrong:

log action sequence
test reducer directly
check immutable updates
check unknown action handling
check derived state duplication
check side effects in reducer
consider state machine if transitions are tangled

Interview Framing

Explain reducers as pure transition functions, then compare useReducer with useState.

Revision Notes

useReducer is for explicit state transitions. It shines when state fields change together.

Key Takeaways

Reducers are not more advanced because they are bigger. They are useful when they make state transitions easier to reason about.

Follow-Up Questions

1. What does useReducer return?
2. What is a reducer?
3. Why should reducers be pure?
4. What is an action?
5. When is useState better?
6. When is useReducer better?
7. What is lazy initialization?
8. Is dispatch identity stable?
9. How do reducers help testing?
10. When would a state machine be better?

How I Would Answer This In A Real Interview

I would say useReducer centralizes state transitions through pure reducer logic and actions. I use it when state fields are related or transitions are complex, while keeping simple independent state in useState.