You should use useReducer instead of useState when state logic becomes complex, interconnected, or harder to manage with simple updates.

Here are the interview-focused scenarios:

1. When state logic is complex

If your state depends on multiple sub-values or involves complex transitions, useReducer is cleaner.

Example:

• Form with many fields + validation rules

• Multi-step workflows

• State transitions like loading → success → error

 2. When next state depends on previous state in multiple ways

With useReducer, all logic is centralized in a reducer function.

Instead of multiple setState calls:

setCount(count + 1);
setFlag(true);
setStatus("updated");

You handle it in one place.

3. When state updates are driven by actions

If your UI behaves like a state machine (actions trigger changes), useReducer is ideal.

dispatch({ type: "INCREMENT" });
dispatch({ type: "RESET" });
dispatch({ type: "SET_ERROR" });

This improves clarity and predictability.

4. When state has multiple sub-values

Instead of multiple useState calls:

const [name, setName] = useState("");
const [age, setAge] = useState(0);
const [error, setError] = useState(null);

You can manage it as one object:

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

5. When you want better scalability and maintainability

useReducer makes large components easier to:

• debug

• test

• extend

• reuse logic

When NOT to use useReducer

Stick with useState when:

• State is simple (boolean, string, number)

• No complex transitions

• No related state values

Example:

const [open, setOpen] = useState(false);

Interview One-liner

Use useReducer when state logic is complex, involves multiple transitions or related values, and useState becomes hard to manage or scale.