Cosa sono i selettori e la memoization nella state management?

Question

Accepted Answer

Un **selettore** è una funzione che **legge (deriva) un pezzo specifico di dato dallo state**. La **memoization** memorizza nella cache il risultato di un selettore in modo che si ricalcoli solo quando i suoi input cambiano — importante per le prestazioni quando i selettori fanno lavoro costoso o per evitare re-render non necessari.

## Selettori di base — incapsulano l'accesso allo state

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

I selettori centralizzano la conoscenza della struttura dello state — i componenti chiedono `selectCartTotal(state)` senza sapere dove/come è memorizzato, quindi se la forma dello state cambia aggiorna un selettore, non ogni componente.

## Il problema: i selettori derivati si ricalcolano ad ogni chiamata

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

Un selettore che crea un nuovo array/oggetto restituisce un **nuovo riferimento** ad ogni chiamata — il che può attivare re-render non necessari (React vede un valore "nuovo") e spreca computazione.

## La soluzione: selettori memoizzati (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` memorizza nella cache il risultato e esegue nuovamente la computazione costosa solo quando i suoi input (`state.items`) cambiano effettivamente — altrimenti restituisce lo **stesso riferimento**, prevenendo sia il ricalcolo che i re-render a valle.

## Composizione di selettori

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

I selettori si compongono, costruendo derivazioni complesse da pezzi semplici e individualmente memorizzati nella cache.

## Perché è importante

I selettori disaccoppiano i componenti dalla forma dello state (un vantaggio di manutenibilità) e forniscono un unico posto per esprimere i dati derivati.

La memoization rende i selettori derivati efficienti — evitando ripetute computazioni costose e, crucialmente, restituendo riferimenti stabili affinché i componenti collegati non si re-rendirizzino inutilmente.

Nelle app Redux/NgRx, i selettori memoizzati (Reselect/`createSelector`) sono uno strumento chiave per le prestazioni e l'architettura; la stessa idea di caching appare come `useMemo` e `computed` altrove.