Memoized selectors with Reselect

WHAT THIS TESTS Whether you understand that React-Redux re-renders a connected component when its selected value changes by reference, and how memoized selectors prevent both wasted computation and wasted renders in a large store.

A GOOD ANSWER COVERS A selector is a function that takes state and returns a slice or derived value, decoupling components from the store's internal shape so reshaping state does not ripple through the UI. Plain selectors that compute derived data, such as filtering a list, return a brand-new array on every call, so useSelector sees a new reference and re-renders even when inputs are unchanged. Reselect's createSelector composes input selectors and a result function, caching the last inputs and output; if inputs are referentially equal, it returns the cached result, giving stable references and skipping recomputation. This matters most for expensive transforms and frequently dispatched stores.

COMMON WRONG ANSWERS Thinking selectors themselves cache without Reselect, believing memoization works across components by default (a single createSelector has a cache size of one, so shared use with different arguments thrashes the cache), or assuming useSelector deep-compares instead of using reference equality.

LIKELY FOLLOW-UPS Why does a default Reselect selector with cache size one break when reused with different props, and how does a selector factory or createSelector with arguments fix it? How does this relate to useSelector's equality function?

ONE CONCRETE EXAMPLE selectVisibleTodos = createSelector([selectTodos, selectFilter], (todos, filter) => todos.filter(t => t.status === filter)). The filtered array is recomputed only when todos or filter changes; otherwise the same array reference is returned, so the connected list component does not re-render on unrelated state updates.