Vad är härledd state och varför bör du undvika att duplicera den?

Question

Accepted Answer

**Härledd state** är något värde du **kan beräkna från befintlig state** i stället för att lagra det separat. Principen: om du kan beräkna det, lagra det inte — härleda det vid varje rendering. Att lagra härledbara värden inbjuder dem att bli osynkroniserade.

## Antipattern: lagring av vad du kan beräkna

```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 är `total` en andra kopia av information som redan finns i `items`. Varje ändring av `items` måste *också* uppdatera `total`, och i det ögonblick du missar en (en borttagning, en kvantitetsändring), håller de inte med varandra och gränssnittet visar fel totalt.

## Lösningen: härled det vid 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` härledd finns inget extra att hålla synkroniserat — ändra `items` och totalen är alltid korrekt.

## Memoize endast om beräkningen är dyr

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

För tunga härledningar (stora filter/sorteringar) cachelagrar `useMemo`/`computed`/selectors resultatet så det endast omberäknas när beroenden ändras — men det är fortfarande *härledd*, inte lagrad som oberoende state.

## Vanliga härledda värden

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

## Varför det spelar roll

Att inte duplicera härledd state är en direkt tillämpning av single-source-of-truth — det eliminerar en helt fel-klass där kopior avviker från varandra.

Regeln "härled, lagra inte" håller din state minimal och ditt gränssnitt konsistent enligt konstruktion.

Att känna igen vad som är härledningsbart (och gripa efter `useMemo`/computed/selectors endast för prestanda, aldrig för att skapa en andra sanningskälla) är ett kännetecken på ren, felresistent state-design.