Apakah keadaan terbitan dan mengapa mengelak daripada menduakannya?

Question

Accepted Answer

**Keadaan terbitan** ialah nilai apa pun yang boleh anda **kira daripada keadaan yang sedia ada** dan bukannya menyimpan secara berasingan. Prinsipnya: jika anda boleh mengiranya, jangan simpannya — terbitkannya pada setiap render. Menyimpan nilai yang boleh diterbitkan mengundang mereka untuk tidak tersinkronisasi.

## Anti-pattern: menyimpan apa yang boleh anda kira

```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 maklumat yang sudah ada dalam `items`. Setiap perubahan pada `items` mesti *juga* mengemas kini `total`, dan apabila anda terlepas satu (membuang, perubahan kuantiti), mereka tidak bersetuju dan UI menunjukkan jumlah yang salah.

## Pembetulan: terbitkannya pada 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` yang diterbitkan, tidak ada lagi yang perlu disinkronkan — ubah `items` dan jumlahnya selalu betul.

## Memo hanya jika pengiraan itu mahal

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

Untuk derivasi berat (penapis/pengisihan besar), `useMemo`/`computed`/selectors menyimpan hasil dalam cache supaya ia hanya dikira semula apabila kebergantungan berubah — tetapi ia masih *diterbitkan*, bukan disimpan sebagai keadaan bebas.

## Nilai terbitan biasa

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

## Mengapa ini penting

Tidak menduakan keadaan terbitan adalah aplikasi langsung bagi single-source-of-truth — ia menghapuskan seluruh kelas pepijat di mana salinan menyimpang.

Peraturan "terbitkan, jangan simpan" memastikan keadaan anda minimum dan UI anda konsisten mengikut pembinaan.

Mengiktiraf apa yang boleh diterbitkan (dan menggunakan `useMemo`/computed/selectors hanya untuk prestasi, tidak pernah untuk mencipta sumber kebenaran kedua) ialah ciri reka bentuk keadaan yang bersih dan tahan pepijat.