Comparison questionMedium~7 minFrontend Foundations / 27 of 30

Interview question

When would you choose `useReducer` instead of several `useState` calls?

Use a reducer for explicit React state transitions

Explains when a reducer clarifies related state transitions and when independent state remains simpler.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I use separate useState values when they change independently and their updates are easy to understand. I reach for useReducer when one event changes several related fields, transitions need names, or the next state depends on the current state in several places. The component dispatches an event such as submitted, succeeded, or failed, and the reducer returns the next immutable state. That gathers transition rules in one place without making the state global.

Full answer below

Practice focus

Reducers, events, state machines, atomic transitions, invariants, initialization, testing, and component complexity.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Reducers are valuable when complexity comes from related transitions, not merely because a component has several values. The decision is about making state rules explicit and keeping invalid combinations out.
I use separate useState values when they change independently and their updates are easy to understand. I reach for useReducer when one event changes several related fields, transitions need names, or the next state depends on the current state in several places. The component dispatches an event such as submitted, succeeded, or failed, and the reducer returns the next immutable state. That gathers transition rules in one place without making the state global.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A reducer is especially useful for multi-step forms, editors, selection workflows, and async mutations with retries. I design events around facts that happened rather than setter-shaped commands such as setLoadingTrue. The reducer can preserve invariants atomically, for example clearing an obsolete error when a retry begins while retaining the user's draft. Lazy initialization can derive the first state from props once, but later prop changes need an explicit reset or synchronization decision.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would keep effects outside the reducer because reducers must remain pure and replayable. Commands such as API calls happen in handlers or an orchestration hook, and their outcomes become dispatched events. I would test meaningful event sequences, including duplicate responses, cancellation, and stale results, instead of testing each assignment separately. If the reducer grows into a large workflow with guarded transitions and parallel states, a state-machine library may communicate the model better; if it only wraps two unrelated booleans, it is probably unnecessary ceremony.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using a reducer only because a component has more than two state values.
Performing network calls or logging side effects inside the reducer.
Naming every action after a setter instead of a domain event.
Resetting state from props without defining when that is valid.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

Related fields are updated in different handlers and drift apart.
The reducer accepts transitions the workflow cannot actually perform.
Async responses overwrite a newer state with no request identity.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

What makes a reducer pure?
How would you handle an API call around a reducer?
When would a state-machine library be clearer?

Continue the section

Next in Frontend Foundations: Custom Hook Design

Step 28 of 30

Design reusable custom React hooks

Opening drill

Comparison questionMedium~7 minFrontend Foundations / 27 of 30

Interview question

When would you choose `useReducer` instead of several `useState` calls?

Use a reducer for explicit React state transitions

Explains when a reducer clarifies related state transitions and when independent state remains simpler.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Reducers, events, state machines, atomic transitions, invariants, initialization, testing, and component complexity.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Reducers are valuable when complexity comes from related transitions, not merely because a component has several values. The decision is about making state rules explicit and keeping invalid combinations out.
I use separate useState values when they change independently and their updates are easy to understand. I reach for useReducer when one event changes several related fields, transitions need names, or the next state depends on the current state in several places. The component dispatches an event such as submitted, succeeded, or failed, and the reducer returns the next immutable state. That gathers transition rules in one place without making the state global.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A reducer is especially useful for multi-step forms, editors, selection workflows, and async mutations with retries. I design events around facts that happened rather than setter-shaped commands such as setLoadingTrue. The reducer can preserve invariants atomically, for example clearing an obsolete error when a retry begins while retaining the user's draft. Lazy initialization can derive the first state from props once, but later prop changes need an explicit reset or synchronization decision.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would keep effects outside the reducer because reducers must remain pure and replayable. Commands such as API calls happen in handlers or an orchestration hook, and their outcomes become dispatched events. I would test meaningful event sequences, including duplicate responses, cancellation, and stale results, instead of testing each assignment separately. If the reducer grows into a large workflow with guarded transitions and parallel states, a state-machine library may communicate the model better; if it only wraps two unrelated booleans, it is probably unnecessary ceremony.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using a reducer only because a component has more than two state values.
Performing network calls or logging side effects inside the reducer.
Naming every action after a setter instead of a domain event.
Resetting state from props without defining when that is valid.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

Related fields are updated in different handlers and drift apart.
The reducer accepts transitions the workflow cannot actually perform.
Async responses overwrite a newer state with no request identity.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

What makes a reducer pure?
How would you handle an API call around a reducer?
When would a state-machine library be clearer?

Continue the section

Next in Frontend Foundations: Custom Hook Design

Step 28 of 30

Design reusable custom React hooks

When would you choose `useReducer` instead of several `useState` calls?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

When would you choose `useReducer` instead of several `useState` calls?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section