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.
[count, setCount] = ();
(count + );
( c + );
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.
[count, setCount] = ();
(count + );
( c + );
1. Pembaruan bersifat asinkron / dibatching. count tidak berubah pada baris setelah setCount; ia memiliki nilai baru pada render berikutnya. Jadi ini hanya bertambah sekali:
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:
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):
const [data] = useState(() => expensiveInit()); // runs once, not every render
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.