04 / 04

When to use useReducer over useState?

Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer.

javascript
Difficulty: 6/10
Topics: state management, hooks, performance

Scenario Questions

0-2 years experience
  1. 1

    You have a simple login form with three inputs. How would you decide whether to manage each field with useState or to switch to a single useReducer, and what practical differences would you see?

  2. 2

    If you add a fourth field to that form while using useReducer, what steps do you take to extend the reducer and keep the component working?

  3. 3

    What happens if you try to update several related pieces of state with separate useState calls versus a single dispatch to a reducer?

2-5 years experience
  1. 1

    We're building a todo list where items can be added, toggled, and filtered, and the component now has many useState calls. Walk me through how you'd refactor it with useReducer and the trade‑offs you’d consider.

  2. 2

    During debugging you notice a state update in a complex form sometimes lags behind the UI. Could switching from useState to useReducer help, and why?

  3. 3

    Your team debates using useReducer for a modal that tracks open/close, loading, and error states. How would you argue for or against it given bundle size and readability?

5-8 years experience
  1. 1

    In a large dashboard with dozens of widgets each having complex interaction state, discuss the pros and cons of centralizing their state with a single useReducer versus keeping many useState hooks, especially regarding performance and re‑renders.

  2. 2

    You notice a memory leak caused by stale closures in a component that uses many useState setters. Explain how moving to useReducer could mitigate the issue and what pitfalls to watch for.

  3. 3

    Design a custom hook that abstracts a useReducer pattern for form handling across the app. What API would you expose and how would you keep it flexible for future fields?

8+ years experience
  1. 1

    Our legacy codebase heavily scatters useState across many components. Propose a migration strategy that introduces useReducer where appropriate, addressing cross‑team coordination, testing, and backward compatibility.

  2. 2

    At scale you need to decide whether to keep local component state with useReducer or lift it to a global state manager like Redux. How do you evaluate the boundary and what criteria guide the decision?

  3. 3

    You're architecting a shared component library for multiple product teams. How would you document guidelines for when to prefer useReducer over useState, and what tooling or lint rules could enforce consistency?

Follow-up Questions

  • Can you sketch a reducer shape that would be hard to model with separate useState calls?
  • How does switching to useReducer change the component's re‑render pattern?
  • What drawbacks might you encounter if you overuse useReducer for trivial state?