Hva er avledet tilstand og hvorfor bør du unngå å duplisere den?

Question

Accepted Answer

**Avledet tilstand** er enhver verdi du kan **beregne fra eksisterende tilstand** i stedet for å lagre separat. Prinsippet: hvis du kan beregne det, lagre det ikke — utled det ved hver rendering. Lagring av beregnbare verdier inviterer dem til å bli usynkronisert.

## Anti-mønsteret: lagring av 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 🐛
  }
}
```

Nå er `total` en andre kopi av informasjon som allerede finnes i `items`. Hver endring i `items` må *også* oppdatere `total`, og det øyeblikket du glemmer en (en fjerning, en mengjetsendring), er de uenige og UI viser feil total.

## Løsningen: utled det ved rendering

```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` utledet, er det ingenting ekstra å holde synkronisert — endre `items` og totalen er alltid riktig.

## Memoisering 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 utledninger (store filtre/sorteringer), `useMemo`/`computed`/selektorer cacher resultatet slik at det bare beregnes på nytt når avhengigheter endres — men det er fortsatt *utledet*, ikke lagret som uavhengig tilstand.

## Vanlige avledede verdier

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

## Hvorfor det er viktig

Ikke duplisering av avledet tilstand er en direkte anvendelse av single-source-of-truth — det eliminerer en hele feilklassen der kopier driver fra hverandre.

Regelen "utled, ikke lagre" holder tilstanden minimal og brukergrensesnittet ditt konsistent ved konstruksjon.

Å gjenkjenne hva som er beregnbart (og å gripe til `useMemo`/computed/selektorer bare for ytelse, aldri for å lage en andre sannhetskilde) er et kjennetegn på ren, feilresistent tilstandsdesign.