Explain Selectors and Derived State in React

35 / 100

Stateintermediate

Selectors and Derived State

Learn how to compute derived values from state efficiently, whether in Redux, Zustand, or plain component state.

Derived state is data computed from other state rather than stored independently — for example, a filtered list, a total price, or a boolean like isEmpty computed from an array's length. A selector is simply a function that takes the state (or part of it) and returns a derived value, keeping the 'source of truth' minimal and avoiding state that can drift out of sync with what it's derived from.

A selector is like a calculator that always recomputes totals fresh from the receipt (source state) rather than trusting a sticky note someone wrote down earlier that might not reflect a later returned item — and a memoized selector is a smart calculator that skips redoing the math if the receipt hasn't actually changed.

Key Concepts

In Redux, selector functions (often written with a library like reselect or RTK's createSelector) can be memoized so that a derived computation only re-runs when its specific input slices of the store change, rather than on every dispatched action, which matters for expensive derivations over large collections.

reselectcreateSelector

The general principle — 'don't store what you can compute' — applies regardless of the state library: storing a computed value in state (like keeping a separate filteredItems state variable in sync with items and filterText via an effect) invites bugs where the two get out of sync, whereas deriving it directly during render (optionally wrapped in useMemo for performance) guarantees consistency by construction.

filteredItemsitemsfilterTextuseMemo

Interviewers ask about selectors to test whether a candidate defaults to storing derived data as its own state (a common anti-pattern) versus computing it, and whether they know how memoized selectors avoid redundant recomputation in larger apps with frequent, unrelated state changes.