Proč je neměnitelnost důležitá při správě stavu?

Question

Accepted Answer

**Neměnitelnost** (immutability) znamená nikdy neměnit stav na místě — místo toho vytvoříte **nový** objekt/pole se změnami. To je klíčové pro to, jak React, Redux a podobné nástroje detekují změny a správně aktualizují UI.

## Problém s mutací

```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 (a Redux) detekují změny porovnáním **referencí** (`oldState === newState`), ne hlubokého obsahu — z důvodu výkonu. Pokud mutujete na místě, reference zůstane stejná, takže framework si myslí, že se nic nezměnilo a přeskočí přerenderování.

## Vzory neměnitelné aktualizace

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

Operátor spread vytváří mělké kopie; pro vnořená data kopírujete každou úroveň, kterou měníte.

## Proč neměnitelnost přináší více výhod

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

## Nástroje, které pomáhají

```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 dělá vnořené neměnitelné aktualizace ergonomické tím, že vám umožňuje psát kód vypadající jako mutace na konceptu, který převede na neměnitelnou aktualizaci.

## Proč to důležité

Neměnitelnost je mechanismus, který umožňuje detekci změn na základě referencí — je to *důvod*, proč `[...items]` spustí přerenderování, ale `items.push()` ne.

Zétra správnosti to odemyká optimalizace výkonu (memoizace porovnává reference) a výkonné funkce (zpět/vpřed, time-travel).

Rozvržení neměnitelných vzorů aktualizace (a nástrojů jako Immer) je nezbytné pro správnou práci s React/Redux; mutování stavu je jeden z nejčastějších začátečnických chyb.