Was ist abgeleiteter Zustand und warum sollte man ihn nicht duplizieren?

Question

Accepted Answer

**Abgeleiteter Zustand** ist ein Wert, den du **aus einem vorhandenen Zustand berechnen** kannst, anstatt ihn separat zu speichern. Das Prinzip: Wenn du es berechnen kannst, speichere es nicht — leite es bei jedem Render ab. Das Speichern von ableitbaren Werten lädt dazu ein, aus der Synchronisation zu geraten.

## Das Anti-Pattern: das speichern, was man berechnen kann

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Jetzt ist `total` eine zweite Kopie von Informationen, die bereits in `items` vorhanden sind. Jede Änderung in `items` muss *auch* `total` aktualisieren, und sobald du eine verpasst (ein Löschen, eine Mengenänderung), stimmen sie nicht überein und die Benutzeroberfläche zeigt die falsche Summe an.

## ## Warum es wichtig ist

Die Lösung: leite es beim Rendering ab

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

Mit `total` abgeleitet gibt es nichts Zusätzliches, das synchron gehalten werden muss — ändere `items` und die Summe ist immer richtig.

## Nur memoisieren, wenn die Berechnung teuer ist

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Bei schwerwiegenden Ableitungen (große Filter/Sortierungen) cachen `useMemo`/`computed`/selectors das Ergebnis, sodass es nur neu berechnet wird, wenn sich Abhängigkeiten ändern — aber es ist immer noch *abgeleitet*, nicht als unabhängiger Zustand gespeichert.

## Häufig abgeleitete Werte

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Warum es wichtig ist

Das Nicht-Duplizieren von abgeleitetem Zustand ist eine direkte Anwendung des Single-Source-of-Truth — es beseitigt eine ganze Fehlerklasse, bei der Kopien auseinanderdriften.

Die Regel "Ableiten, nicht speichern" hält deinen Zustand minimal und deine Benutzeroberfläche konstruktionsbedingt konsistent.

Zu erkennen, was ableitbar ist (und nur bei `useMemo`/computed/selectors zur Performance zu greifen, niemals um eine zweite Wahrheitsquelle zu schaffen), ist ein Merkmal sauberer, fehlerresistenter Zustandsentwicklung.