Apa iku derived state lan kenapa musti ngindari nggandakne?

Question

Accepted Answer

**Derived state** iku nilai apa wae sing bisa koe **hitung saka state sing wis ana** tinimbang nyimpen kapisah. Prinsipe: yen bisa diitung, aja disimpen — turunne saben render. Nyimpen nilai sing bisa diturunake ngajak sliramu kelalen sinkronisasi.

## Anti-pattern: nyimpen apa sing bisa diitung

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

Saiki `total` yaiku salinan kedua saka informasi sing wis ana ing `items`. Saben owah ing `items` kudu *uga* nganyakake `total`, lan wujud kowe keliwat siji (ngilangi, owah kuantitas), ora cocog lan UI nampilake total sing salah.

## Solusi: turunke saben 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
  }
}
```

Karo `total` sing diturunake, ora ana tambahan apa-apa sing kudu disinkronisasi — owahi `items` lan total mesthi bener.

## Memoize mung yen komputasi kuwi larang

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

Gabung turunan sing berat (filter/sortir gedhe), `useMemo`/`computed`/selectors simpen cache asile supaya mung dikompute maneh yen dependensi owah — nanging tetep *diturunake*, ora disimpen minangka state sing mandiri.

## Nilai-nilai diturunake sing umum

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

## Mengapa iku penting

Ta nggandakno derived state yaiku aplikasi langsung saka single-source-of-truth — ngilangi kabeh jenis bug sing salinan mabur adoh.

Aturan "turunke, aja disimpen" njaga state mu minimal lan UI mu konsisten dening konstruksi.

Amer apa sing bisa diturunake (lan njogja `useMemo`/computed/selectors mung kanggo performa, ora kanggo nggawe sumber kabenaran nomer loro) yaiku ciri desain state sing bersih lan tahan bug.