Dlaczego immutability jest ważna w zarządzaniu stanem?

Question

Accepted Answer

**Immutability** oznacza nigdy nie modyfikowanie state w miejscu — zamiast tego tworzysz **nowy** obiekt/tablicę ze zmianami. To jest centralne dla tego, jak React, Redux i podobne narzędzia wykrywają zmiany i prawidłowo aktualizują interfejs użytkownika.

## Problem z mutacją

```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) wykrywają zmiany poprzez porównanie **referencji** (`oldState === newState`), nie głęboką zawartość — ze względu na wydajność. Jeśli zmutujesz w miejscu, referencja pozostaje taka sama, więc framework myśli, że nic się nie zmieniło i pomija re-render.

## Wzorce immutable update

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

Operator spread tworzy płytkie kopie; dla zagnieżdżonych danych kopiujesz każdy poziom, który zmieniasz.

## Dlaczego immutability przynosi więcej korzyści

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

## Narzędzia, które pomagają

```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 czyni zagnieżdżone immutable updates ergonomicznym, pozwalając ci pisać kod wyglądający jak mutacja na drafcie, który konwertuje do immutable update.

## Dlaczego to ważne

Immutability to mechanizm, który sprawia, że oparta na referencjach detekcja zmian działa — to *dlatego* `[...items]` wyzwala re-render, ale `items.push()` nie.

Poza poprawnością, odblokowuje optymalizacje wydajności (memoization porównuje referencje) i potężne funkcje (undo/redo, time-travel).

Zrozumienie wzorców immutable update (i narzędzi takich jak Immer) jest niezbędne do prawidłowej pracy z React/Redux; mutowanie state to jeden z najczęstszych błędów początkujących.