Wat is afgeleide toestand en waarom moet je deze niet dupliceren?

Question

Accepted Answer

**Afgeleide toestand** is elke waarde die je **kunt berekenen uit bestaande toestand** in plaats van apart op te slaan. Het principe: als je het kunt berekenen, sla het niet op — leid het af bij elke render. Het opslaan van afleidbare waarden nodigt uit dat ze uit sync raken.

## Het anti-patroon: opslaan wat je kunt berekenen

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

Nu is `total` een tweede kopie van informatie die al in `items` aanwezig is. Elke wijziging van `items` moet *ook* `total` bijwerken, en op het moment dat je er eentje mist (een verwijdering, een hoeveelheidswijziging), stemmen ze niet overeen en toont de UI het verkeerde totaal.

## De oplossing: leid het af bij render

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

Met `total` afgeleid, is er niets extra om in sync te houden — wijzig `items` en het totaal klopt altijd.

## Memoizeer alleen als de berekening duur is

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

Voor zware afleidingen (grote filters/sorts), slaan `useMemo`/`computed`/selectors het resultaat in cache op zodat het alleen opnieuw wordt berekend wanneer afhankelijkheden veranderen — maar het is nog steeds *afgeleid*, niet opgeslagen als onafhankelijke toestand.

## Veelvoorkomende afgeleide waarden

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

## Waarom het belangrijk is

Geen afgeleide toestand dupliceren is een directe toepassing van single-source-of-truth — het elimineert een hele bug-klasse waarbij kopieën uit elkaar groeien.

De regel "leid af, sla niet op" houdt je toestand minimaal en je UI consistent volgens constructie.

Het herkennen van wat afleidbaar is (en alleen `useMemo`/computed/selectors gebruiken voor prestaties, nooit om een tweede bron van waarheid te creëren) is een kenmerk van schoon, bug-resistent toestandsontwerp.