Bagaimana cara kerja hook useState?

Question

Accepted Answer

`useState` memberikan sebuah komponen fungsi sepotong **state lokal, reaktif**. Ini mengembalikan sepasang: **nilai saat ini** dan fungsi **setter**. Memanggil setter menjadwalkan render ulang dengan nilai baru.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Dua hal yang mengejutkan pemula

**1. Update bersifat asinkron / batch.** `count` tidak berubah pada baris setelah `setCount`; nilai baru ada pada render *berikutnya*. Jadi ini hanya naik satu kali:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Gunakan **functional updater** ketika nilai berikutnya bergantung pada nilai sebelumnya, karena React meneruskan nilai terbaru:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. Nilai awal hanya digunakan pada render pertama.** Untuk default yang mahal, berikan fungsi agar berjalan sekali (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Mengapa ini penting

State adalah apa yang membuat komponen interaktif — React menjalankan kembali fungsi dan merender ulang UI kapan pun state berubah.

Perlakukan state sebagai **immutable**: buat array/object baru daripada mutasi, mis. `setItems([...items, x])`, jika tidak React mungkin tidak mendeteksi perubahan.