Mikä on johdettu tila ja miksi välttää sen kopioinnin?

Question

Accepted Answer

**Johdettu tila** on mikä tahansa arvo, jonka voit **laskea olemassa olevasta tilasta** sen sijaan, että tallennat sen erikseen. Periaate: jos voit laskea sen, älä tallenna sitä — johda se jokaisen renderöinnin yhteydessä. Johdettavien arvojen tallentaminen kutsuu niitä synkronoimattomuuteen.

## Antikaava: sen tallentaminen, mitä voit laskea

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

Nyt `total` on toinen kopio tiedoista, joka on jo `items`-kokoelmassa. Jokainen `items`-muutos täytyy *myös* päivittää `total`, ja sillä hetkellä kun unohdassa yhden (poistaminen, määrän muutos), ne ovat eri mieltä ja käyttöliittymä näyttää väärää summaa.

## Ratkaisu: johda se renderöinnin aikana

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

Johdetun `total`-arvon kanssa ei ole mitään ylimääräistä, mitä pitää pitää synkronoituna — muuta `items`-kokoelmaa ja summa on aina oikea.

## Memorisoi vain jos laskenta on kallis

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

Raskaille johdoille (suuret suodattimet/lajittelut), `useMemo`/`computed`/selectors välimuististavat tuloksen niin, että se lasketaan uudelleen vain riippuvuuksien muuttuessa — mutta se on silti *johdettu*, ei tallennettu itsenäisenä tilana.

## Yleiset johdetut arvot

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

## Miksi se on tärkeää

Johdetun tilan kopioinnin välttäminen on suoran soveltamisen yhden totuuden lähde -periaatteelle — se eliminoi koko virholuokan, jossa kopiot hajoavat erilleen.

"Johda, älä tallenna" -sääntö pitää tilasi minimaalisen ja käyttöliittymäsi johdonmukaisena rakentamisen perusteella.

Sen tunnistaminen, mikä on johdettavissa (ja käyttäminen `useMemo`/computed/selectors vain suorituskyvyn vuoksi, ei koskaan toisen totuuden lähteen luomiseksi) on puhtaan, virheenkestävän tilasuunnittelun tunnus.