How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
What's really being asked
This question tests whether you understand the Redux principle of keeping state minimal and deriving data via selectors rather than storing computed values. It also checks your familiarity with memoization, specifically using the Reselect library, and whether you know how to structure selectors across multiple slices without creating tight coupling or performance bottlenecks.
The full answer
First, state that the Redux store should only contain raw source data, not computed values like cartSummary. Second, introduce Reselect and createSelector as the standard solution for memoized derived data. Third, explain that createSelector takes input selectors for each dependency slice, such as selectItems, selectUserDiscounts, and selectShippingRules, and passes their results to a transform function that computes the summary. Fourth, note that Reselect memoizes the output so the transform only runs when the input selector return values change by reference, which prevents unnecessary recalculations and component re-renders. Fifth, mention colocation, either placing selectors in the relevant slice files or in a dedicated selectors directory, and exporting them for use in useSelector hooks.
The mistakes people make
A major red flag is suggesting a dedicated cartSummary slice in the Redux store that is updated by reducers or middleware whenever items or discounts change. This creates synchronization bugs and bloats state. Another mistake is computing the summary inside a component on every render without memoization, which wastes CPU and breaks React optimization. Using useEffect to listen for dependency changes and then dispatching actions to update derived state is also an anti-pattern because it turns a simple calculation into a complex async flow.
What usually comes next
The interviewer might ask how you would handle a selector that takes arguments, such as a specific shipping region, and you should mention factory functions or curried selectors with re-reselect. They might also ask about normalizing state with createEntityAdapter and how selectors work with normalized structures. Another follow-up could be testing your understanding of selector composition, where smaller selectors are reused as inputs to larger ones.
A concrete example
Suppose the items slice holds an array of product objects, userDiscounts holds a percentage, and shippingRules holds a rate table. You would write three input selectors: selectItems returns state.items, selectDiscount returns state.userDiscounts.rate, and selectShipping returns state.shippingRules.rateTable. Then createSelector combines them into selectCartSummary, calculating subtotal from items, applying the discount, and adding shipping cost. If only shippingRules changes, the items and discounts inputs remain referentially equal, so the subtotal and discount calculations are skipped and the output updates instantly without recomputing the entire cart.
Interview question
Which approach correctly derives a cart summary from multiple Redux slices while keeping state minimal and avoiding redundant recalculation?
- a.Use Reselect's createSelector with input selectors for each slice and a transform function to compute the summaryCorrect
- b.Store the summary in a dedicated Redux slice and update it via reducers whenever items or discounts change
- c.Compute the summary inside a component on every render by transforming useSelector results without memoization
- d.Use useEffect to watch for dependency changes and dispatch actions to update a derived state slice
Why? this is the answer
createSelector keeps state minimal by deriving data from raw slices and memoizes output to prevent redundant recalculation. Storing derived values in a dedicated Redux slice (B) causes synchronization bugs and state bloat.
Just read this? Test yourself on what you have been reading.
Read the original → redux.js.org
- #redux
- #reselect
- #selectors
- #state-management
- #performance
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on redux — each one lists the topics its interview covers.
See open roles