What is `createSelector`?
Assesses fundamental understanding of React conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
createSelector (from Reselect, which Redux Toolkit re-exports) creates memoized selectors. It takes one or more "input selectors" and a "result function", and only recomputes the result when the *outputs* of the input selectors change — otherwise it returns the previously cached value.
import { createSelector } from "@reduxjs/toolkit";
const selectItems = (state) => state.cart.items;
// Recomputes total only when `items` reference actually changes
const selectTotal = createSelector([selectItems], (items) =>
items.reduce((sum, item) => sum + item.price * item.qty, 0)
);
function Cart() {
const total = useSelector(selectTotal);
// ...
}
Without memoization, computing total inline inside useSelector would return a brand-new number/object on every dispatch, which is fine for primitives but becomes a real problem when deriving arrays/objects (e.g., filtering or sorting a list), since a new reference on every render defeats React.memo/useSelector's equality check and causes unnecessary re-renders.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.