06 / 09

How to perform state management using reducer and react context?

Our requirement is:
  1. 1

    A initial state object

  2. 2

    A reducer function. Reducers let you consolidate a component’s state update logic.

  3. 3

    A context provider initialised with state and dispatch function created using useReducer hook

  4. 4

    A function exporting useContext

javascript
Difficulty: 5/10
Topics: useReducer, Context API, state sharing

Scenario Questions

0-2 years experience
  1. 1

    We have two sibling components that need to toggle the same boolean flag. How would you set up a reducer and a context to share that flag between them?

  2. 2

    If you forget to wrap a component tree with the context provider and call useContext inside a child, what will happen at runtime?

2-5 years experience
  1. 1

    You’re adding a multi‑step form where each step lives in its own component and needs to read and update the same form state. Walk me through how you’d structure the reducer actions and context to make that work.

  2. 2

    During development you notice that dispatching an action from a nested component causes the entire component tree to re‑render repeatedly. What could be causing that, and how would you fix it?

5-8 years experience
  1. 1

    In a large codebase you have several feature modules, each with its own reducer. How would you combine them while keeping context boundaries as small as possible? Discuss the trade‑offs of a single global context versus multiple scoped contexts.

  2. 2

    A context provider is causing performance issues because unrelated state changes trigger re‑renders of many consumers. What strategies can you use to mitigate this without abandoning the reducer‑context pattern?

8+ years experience
  1. 1

    Your organization wants to migrate from Redux to a useReducer + Context solution across many services. What architectural considerations, testing strategy, and rollout plan would you propose to ensure a smooth transition?

  2. 2

    Multiple teams need to share some global configuration but also maintain independent feature‑specific state. How would you design a scalable hierarchy of contexts and reducers to support this while avoiding tight coupling?

Follow-up Questions

  • What would you change if the state grew to include dozens of unrelated slices?
  • How do you test a reducer that lives inside a context provider?
  • Can you compare this approach to using Redux in terms of boilerplate and scalability?