Cos'è lo stato derivato e perché evitare di duplicarlo?

Question

Accepted Answer

**Lo stato derivato** è qualsiasi valore che puoi **calcolare da uno stato esistente** anziché memorizzare separatamente. Il principio: se puoi calcolarlo, non memorizzarlo — derivalo ad ogni render. Memorizzare valori derivabili li invita a desincronizzarsi.

## L'anti-pattern: memorizzare quello che puoi calcolare

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Ora `total` è una seconda copia di informazioni già in `items`. Ogni modifica a `items` deve *anche* aggiornare `total`, e nel momento in cui ne perdi una (una rimozione, un cambio di quantità), non concordano e l'UI mostra il totale sbagliato.

## La soluzione: derivalo al render

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

Con `total` derivato, non c'è nulla di extra da tenere in sincronizzazione — modifica `items` e il totale è sempre corretto.

## Memoizza solo se il calcolo è costoso

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Per derivazioni pesanti (grandi filtri/ordinamenti), `useMemo`/`computed`/selectors memorizzano nella cache il risultato in modo che si ricalcoli solo quando le dipendenze cambiano — ma è comunque *derivato*, non memorizzato come stato indipendente.

## Valori derivati comuni

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Perché è importante

Non duplicare lo stato derivato è un'applicazione diretta del single-source-of-truth — elimina un'intera classe di bug dove le copie si allontanano.

La regola "deriva, non memorizzare" mantiene il tuo stato minimo e la tua UI coerente per costruzione.

Riconoscere cosa è derivabile (e ricorrere a `useMemo`/computed/selectors solo per performance, mai per creare una seconda fonte di verità) è un marchio di progettazione dello stato pulita e resistente ai bug.