Hvad er afledt tilstand og hvorfor undgå at duplikere den?

Question

Accepted Answer

**Afledt tilstand** er enhver værdi, du kan **beregne fra eksisterende tilstand** i stedet for at gemme den separat. Princippet: hvis du kan beregne det, skal du ikke gemme det — udled det ved hver gengivelse. Lagring af afledelbare værdier inviterer dem til at blive ude af synkronisering.

## Antipattern: lagring af det du kan beregne

```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 er `total` en anden kopi af information, der allerede ligger i `items`. Hver ændring af `items` må *også* opdatere `total`, og i det øjeblik du springer en over (en fjernelse, en mængdeændring), er de uenige og brugerfladen viser den forkerte total.

## Rettelsen: udled det ved gengivelse

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

Med `total` afledt er der intet ekstra at holde i synkronisering — ændre `items` og totalen er altid rigtig.

## Memoriser kun hvis beregningen er dyr

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

For tunge afledelinger (store filtre/sorteringer), `useMemo`/`computed`/selectors cache resultatet, så det kun genberegnes når afhængigheder ændres — men det er stadig *afledt*, ikke gemt som uafhængig tilstand.

## Almindelige aflede værdier

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

## Hvorfor det betyder noget

Ikke at duplikere afledt tilstand er en direkte anvendelse af single-source-of-truth — det eliminerer en hel fejlklasse hvor kopier drives fra hinanden.

Reglen "udled, gemm ikke" holder din tilstand minimal og din brugerflade konsistent efter konstruktion.

At genkende hvad der er afledeligt (og kun nå til `useMemo`/computed/selectors for performance, aldrig for at skabe en anden sandhedskilde) er et kendetegn ved rent, fejlresistent tilstandsdesign.