Apa itu derived state dan mengapa harus menghindari menduplikasinya?

Question

Accepted Answer

**Derived state** adalah nilai apa pun yang dapat Anda **hitung dari state yang sudah ada** daripada menyimpannya secara terpisah. Prinsipnya: jika Anda dapat menghitungnya, jangan simpan — derive pada setiap render. Menyimpan nilai yang dapat diturunkan mengundang mereka untuk tidak tersinkronisasi.

## The anti-pattern: storing what you can compute

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

Sekarang `total` adalah salinan kedua dari informasi yang sudah ada di `items`. Setiap perubahan pada `items` juga harus memperbarui `total`, dan saat Anda melewatkan satu (hapus, perubahan kuantitas), keduanya tidak setuju dan UI menampilkan total yang salah.

## The fix: derive it on 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
  }
}
```

Dengan `total` diturunkan, tidak ada yang ekstra untuk disinkronisasi — ubah `items` dan totalnya selalu benar.

## Memoize only if the computation is expensive

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

Untuk derivasi yang berat (filter/sort besar), `useMemo`/`computed`/selectors menyimpan hasil agar hanya recompute ketika dependensi berubah — tetapi masih *derived*, bukan disimpan sebagai state independen.

## Common derived values

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

## Why it matters

Tidak menduplikasi derived state adalah penerapan langsung dari single-source-of-truth — ini menghilangkan seluruh kelas bug di mana salinan saling berbeda.

Aturan "derive, jangan simpan" membuat state Anda minimal dan UI Anda konsisten menurut konstruksi.

Mengenali apa yang dapat diturunkan (dan menggunakan `useMemo`/computed/selectors hanya untuk kinerja, tidak pernah untuk membuat sumber kebenaran kedua) adalah ciri khas desain state yang bersih dan tahan bug.