De ce este imutabilitatea importantă în gestionarea stării?

Question

Accepted Answer

**Immutability** înseamnă să nu modifici niciodată starea în loc — în schimb, creezi un **nou** obiect/array cu modificările. Aceasta este centrală pentru modul în care React, Redux și instrumente similare detectează modificări și actualizează UI-ul corect.

## Problema cu mutația

```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 (și Redux) detectează modificări prin compararea **referințelor** (`oldState === newState`), nu conținut adânc — pentru performanță. Dacă muți în loc, referința rămâne aceeași, deci framework-ul crede că nimic nu s-a schimbat și omite re-redarea.

## Modele de actualizare imutabile

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

Operatorul spread creează copii superficiale; pentru date imbricate, copiezi fiecare nivel pe care îl modifici.

## De ce imutabilitatea aduce mai multe beneficii

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

## Instrumente care ajută

```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 face actualizările imutabile imbricate ergonomice, permițând ți să scrii cod care arată ca o mutație pe o schiță pe care o convertește într-o actualizare imutabilă.

## De ce este important

Imutabilitatea este mecanismul care face funcționarea detectării modificărilor bazate pe referință — aceasta este *de ce* `[...items]` declanșează o re-redare, dar `items.push()` nu.

Dincolo de corectitudine, deblocheaza optimizări de performanță (memoization compară referințe) și caracteristici puternice (undo/redo, time-travel).

Înțelegerea modelelor de actualizare imutabile (și a instrumentelor cum ar fi Immer) este esențială pentru lucrul corect cu React/Redux; mutația stării este una dintre cele mai frecvente greșeli ale începătorilor.