Warum ist Immutability in der State Management wichtig?

Question

Accepted Answer

**Immutability** bedeutet, den State nie an Ort und Stelle zu ändern — stattdessen erstellst du ein **neues** Objekt/Array mit den Änderungen. Dies ist zentral dafür, wie React, Redux und ähnliche Tools Änderungen erkennen und die UI korrekt aktualisieren.

## Das Problem mit Mutation

```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 (und Redux) erkennen Änderungen durch Vergleich von **Referenzen** (`oldState === newState`), nicht durch Vergleich des tiefen Inhalts — aus Performanzgründen. Wenn du an Ort und Stelle mutierst, bleibt die Referenz gleich, daher denkt das Framework, dass sich nichts geändert hat, und überspringt das Re-Rendering.

## Immutable Update Patterns

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

Der Spread Operator erstellt flache Kopien; bei verschachtelten Daten kopierst du jede Ebene, die du änderst.

## Warum Immutability mehr Vorteile bringt

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

## Tools die helfen

```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 macht verschachtelte immutable Updates ergonomisch, indem du mutationsverwirrendes Code auf einem Entwurf schreiben kannst, den es in ein immutable Update konvertiert.

## Warum es wichtig ist

Immutability ist der Mechanismus, der auf Referenzen basierende Change Detection funktionieren lässt — es ist der *Grund*, warum `[...items]` ein Re-Rendering auslöst, aber `items.push()` nicht.

Jenseits der Korrektheit erschließt es Performance Optimierungen (Memoization vergleicht Referenzen) und leistungsstarke Funktionen (Rückgängig/Wiederherstellen, Time-Travel).

Das Verständnis von immutable Update Patterns (und Tools wie Immer) ist unverzichtbar für die korrekte Arbeit mit React/Redux; das Mutieren von State ist einer der häufigsten Anfängerfehler.