Discuss 'useReducer' hook.

useReducer is very similar to useState, but it lets you move the state update logic from event handlers into a single function outside of your component.

useReducer is a React Hook that lets you add a reducer to your component state.

reducer: The reducer function specifies how the state gets updated.

1
It must be pure, should take the state and action as arguments
2
It should return the next state. State and action can be of any type.

initialArg: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next init argument.

optional init: The initialiser function that should return the initial state.

1
If it’s not specified, the initial state is set to initialArg.
2
Otherwise, the initial state is set to the result of calling init(initialArg).

useReducer returns an array with exactly two values:

1
The current state. During the first render, it’s set to init or initialArg (if there’s no init).
2
The dispatch function lets you update the state to a different value and trigger a re-render.

Difficulty: 6/10

Topics: state management, reducer patterns, performance

Scenario Questions

0-2 years experience

1
You need to toggle a modal open and closed in a component. How would you implement that using useReducer instead of useState?
2
If you dispatch an action with a type that your reducer doesn't handle, what happens to the component's state?

2-5 years experience

1
We're building a multi‑field form with validation. Explain how you'd structure the reducer and actions to handle field updates and validation errors.
2
During a code review you notice a component using useReducer is re‑rendering more often than expected. What could be causing that and how would you fix it?
3
Why might you choose useReducer over several useState calls for this form implementation?

5-8 years experience

1
In a large dashboard several sibling components need to share complex state. How would you design a shared‑state solution using useReducer and Context, and what trade‑offs does it have compared to Redux?
2
Your reducer has grown beyond 100 lines and you see performance degradation when dispatching actions. What strategies would you use to keep the reducer performant and maintainable?
3
How would you test a reducer that handles optimistic UI updates and rolls back on an API failure?

8+ years experience

1
Our legacy codebase uses Redux everywhere, but we want to gradually adopt useReducer for new modules to reduce bundle size. How would you plan the migration, ensure type safety, and avoid state inconsistency across teams?
2
When multiple teams need to extend a shared reducer for a feature‑flag system, what architectural patterns would you put in place to prevent reducer bloat and maintain clear ownership?
3
Discuss the long‑term maintenance implications of using useReducer with React Context for global state versus a dedicated state library.

Follow-up Questions

❓Can you show the exact action object you would dispatch for updating a form field?
❓How would you reset the entire reducer state back to its initial value?
❓If you needed to perform an API call when an action is dispatched, where would you place that side effect?