Perché l'immutabilità è importante nella gestione dello stato?

Question

Accepted Answer

**Immutabilità** significa non modificare mai lo stato direttamente — invece, si crea un **nuovo** oggetto/array con le modifiche. Questo è centrale nel modo in cui React, Redux e strumenti simili rilevano i cambiamenti e aggiornano l'UI correttamente.

## Il problema con le mutazioni

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

React (e Redux) rilevano i cambiamenti confrontando **riferimenti** (`oldState === newState`), non i contenuti in profondità — per performance. Se si muta direttamente, il riferimento rimane lo stesso, quindi il framework pensa che nulla sia cambiato e salta il re-render.

## Modelli di aggiornamento immutabile

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

L'operatore spread crea copie superficiali; per dati annidati si copia ogni livello che si modifica.

## Perché l'immutabilità porta ulteriori benefici

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## Strumenti che aiutano

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Immer rende gli aggiornamenti immutabili annidati ergonomici permettendoti di scrivere codice dall'aspetto mutante su una draft che converte in un aggiornamento immutabile.

## Perché è importante

L'immutabilità è il meccanismo che fa funzionare il rilevamento dei cambiamenti basato su riferimenti — è il *motivo* per cui `[...items]` attiva un re-render ma `items.push()` no.

Oltre alla correttezza, sblocca ottimizzazioni di performance (la memoizzazione confronta i riferimenti) e funzionalità potenti (undo/redo, time-travel).

Comprendere i modelli di aggiornamento immutabile (e strumenti come Immer) è essenziale per lavorare correttamente con React/Redux; mutare lo stato è uno dei bug più comuni tra i principianti.