Mi az származtatott állapot, és miért kell elkerülni a duplikálást?

Question

Accepted Answer

**Származtatott állapot** bármely érték, amelyet **meglévő állapotból lehet kiszámítani**, ahelyett, hogy külön tárolna. Az elv: ha kiszámíthatja, ne tároljuk — származtassuk minden egyes megjelenítéskor. A levezetett értékek tárolása meghívja őket aszinkronizálódni.

## Az antipatern: az összehasonlítható tárolása

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

Most a `total` az `items` -ben már meglévő információ másolatának kópja. Az `items` -ben végzett minden módosítást a `total` -t is *frissíteni* kell, és amint elfelejt egyet (eltávolítás, mennyiség módosítása), egyet nem értenek egymást, és a felhasználói felület rossz összeset mutat.

## A javítás: származtassuk meg a megjelenítés során

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

A `total` -val levezetetten nincs semmi további szinkronizálás — módosítsa az `items` -t, és a teljes mindig helyes.

## Memorizáljunk, csak ha a számítás drága

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

A nehéz levezetésekhez (nagy szűrések/rendezések), `useMemo`/`computed`/selectors a gyorsítótárakat az eredményre, így csak akkor újraszámítódik, ha a függőségek megváltoznak — de még mindig *levezetett*, nem független állapotként tárolva.

## Közös származtatott értékek

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

## Miért fontos ez

A származtatott állapot nem duplikálása az egyetlen információforrás közvetlen alkalmazása — ez egy egész hibaosztályt csökkent, ahol a másolatok eltérnek.

A „Levezetni, ne tárolni