Why are they called reducer functions?
- 1
They’re called “reducers” because the idea comes directly from the concept of a reduce operation—like the one in JavaScript’s Array.prototype.reduce.
- 2
A Redux reducer function is the same idea as this 'reduce callback' function! It takes a 'previous result' (the state), and the 'current item' (the action object), decides a new state value based on those arguments, and returns that new state.
Scenario Questions
- 1
How would you use a reducer function with the useReducer hook to toggle a boolean flag in a component?
- 2
What happens if you return a new state object that doesn't include all previous properties inside a reducer?
- 1
We have a form with multiple fields and you implemented useReducer. If the form stops updating after adding a new field, how would you debug the reducer?
- 2
When deciding between useState and useReducer for managing a list of items, what trade‑offs would you consider?
- 1
In a large dashboard you’re using multiple nested reducers. How would you structure them to avoid unnecessary re‑renders and keep the state predictable?
- 2
If a reducer starts causing performance bottlenecks because it runs on every keystroke, what strategies could you apply to mitigate the impact?
- 1
Your team is migrating a legacy codebase that uses many setState calls to a centralized reducer pattern. What architectural considerations and migration steps would you propose?
- 2
When multiple teams share a common reducer library, how do you handle versioning and breaking changes without disrupting production?
Follow-up Questions
- ❓Can you walk me through a simple reducer implementation for toggling a boolean?
- ❓Why is immutability important in a reducer function?
- ❓What would you do if a reducer threw an error during dispatch?