What are selectors and memoization in state management?

Question

Accepted Answer

A **selector** is a function that **reads (derives) a specific piece of data from the state**. **Memoization** caches a selector's result so it only recomputes when its inputs change — important for performance when selectors do expensive work or to avoid unnecessary re-renders.

## Basic selectors — encapsulate state access

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Selectors centralize knowledge of the state structure — components ask `selectCartTotal(state)` without knowing where/how it's stored, so if the state shape changes you update one selector, not every component.

## The problem: derived selectors recompute on every call

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

A selector that creates a new array/object returns a **new reference** each call — which can trigger needless re-renders (React sees a "new" value) and wastes computation.

## The fix: memoized selectors (Reselect)

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

`createSelector` caches the result and only re-runs the expensive computation when its inputs (`state.items`) actually change — otherwise it returns the **same reference**, preventing both recomputation and downstream re-renders.

## Composing selectors

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

Selectors compose, building complex derivations from simple, individually-cached pieces.

## Why it matters

Selectors decouple components from the state's shape (a maintainability win) and provide one place to express derived data.

Memoization makes derived selectors efficient — avoiding repeated expensive computation and, crucially, returning stable references so connected components don't re-render unnecessarily.

In Redux/NgRx apps, memoized selectors (Reselect/`createSelector`) are a key performance and architecture tool; the same caching idea appears as `useMemo` and `computed` elsewhere.