Bagaimana useState hook berfungsi?

Question

Accepted Answer

`useState` memberikan komponen fungsi sepotong **state lokal, reaktif**. Ia mengembalikan sepasang: **nilai saat ini** dan fungsi **setter**. Memanggil setter menjadwalkan ulang render 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. Pembaruan bersifat asinkron / dibatching.** `count` tidak berubah pada baris setelah `setCount`; ia memiliki nilai baru pada *render* berikutnya. Jadi ini hanya bertambah sekali:

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

Gunakan **functional updater** ketika nilai berikutnya bergantung pada yang 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, teruskan fungsi sehingga 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 me-render ulang UI setiap kali state berubah.

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