Derived state ni nini na kwa nini kuepuka kunakili kukamatia?

Question

Accepted Answer

**Derived state** ni thamani yoyote ambayo unaweza **kuihesabu kutoka kwa state iliyopo** badala ya kuihifadhi kando. Kanuni: kama unaweza kuihesabu, usiihifadhi — itokeza kwa kila render. Hifadhi ya thamani zinazoweza kutokeza inasumbuwa kuwa hazisawiani.

## Kaida mbaya: hifadhi ya kile unachoweza kuihesabu

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

Sasa `total` ni nusura ya pili ya habari ambayo iko tayari katika `items`. Kila mabadiliko ya `items` lazima *pia* sasisha `total`, na wakati unapokamatia moja (uondoaji, mabadiliko ya kiasi), wanavyopinga na UI inaonyesha jumla sio sahihi.

## Suluhisho: itokeza wakati wa render

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

Kwa `total` iliyokatika, hakuna kinalochimbacho cha ziada kuandika — badilisha `items` na jumla daima ni sahihi.

## Memoize tu kama hesabu ni ghali

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

Kwa kutokeza kwa uzito (kuchuja/kupanga kubwa), `useMemo`/`computed`/selectors hifadhi matokeo ili isongezewe tu wakati utegemezi hubadilika — lakini bado ni *kutokeza*, sio kuhifadhi kama state huru.

## Thamani za kawaida za kutokeza

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

## Kwa nini inafanya kazi

Kutozipiga derived state ni matumizi ya moja-kwa-moja ya chanzo-cha-kweli — inatarazuki darasa lote la hitilafu ambapo nakala zenye mabadiliko yanakamatika.

Kanuni "itokeza, usihifadhi" inahifadhi state yako ndogo na UI yako sawa kwa muundo.

Kutambua kile kinachoweza kutokeza (na kufikia `useMemo`/computed/selectors tu kwa utendaji, kamwe kuundwa chanzo cha pili cha kweli) ni dalili ya muundo wa state safi na unaotua makosa.