¿Qué son los selectores y la memoización en la gestión de estado?

Question

Accepted Answer

Un **selector** es una función que **lee (deriva) una pieza específica de datos del estado**. **Memoization** almacena en caché el resultado de un selector para que solo se recalcule cuando cambien sus entradas — importante para el rendimiento cuando los selectores realizan trabajo costoso o para evitar re-renders innecesarios.

## Selectores básicos — encapsular el acceso al estado

```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
```

Los selectores centralizan el conocimiento de la estructura del estado — los componentes solicitan `selectCartTotal(state)` sin saber dónde/cómo se almacena, por lo que si la forma del estado cambia, actualiza un selector, no cada componente.

## El problema: los selectores derivados se recalculan en cada llamada

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

Un selector que crea un nuevo array/objeto devuelve una **nueva referencia** en cada llamada — lo que puede desencadenar re-renders innecesarios (React ve un valor "nuevo") y desperdicia cálculo.

## La solución: selectores memoizados (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` almacena en caché el resultado y solo vuelve a ejecutar el cálculo costoso cuando sus entradas (`state.items`) realmente cambian — de lo contrario, devuelve la **misma referencia**, evitando tanto el recálculo como los re-renders posteriores.

## Composición de selectores

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

Los selectores se componen, construyendo derivaciones complejas a partir de piezas simples, memoizadas individualmente.

## Por qué es importante

Los selectores desacoplan los componentes de la forma del estado (una victoria de mantenibilidad) y proporcionan un lugar para expresar datos derivados.

La memoización hace que los selectores derivados sean eficientes — evita cálculos costosos repetidos y, crucialmente, devuelve referencias estables para que los componentes conectados no se re-rendericen innecesariamente.

En aplicaciones Redux/NgRx, los selectores memoizados (Reselect/`createSelector`) son una herramienta clave de rendimiento y arquitectura; la misma idea de almacenamiento en caché aparece como `useMemo` y `computed` en otros lugares.