React16 / 78

useState: Nilai, Setter, dan Re-render

Di React, mengubah variabel biasa (let counter = 0) tidak akan memperbarui tampilan di layar — React tidak tahu variabel itu berubah. Kamu wajib memakai useState. Hook ini memberikan dua hal: wadah untuk menyimpan nilai (state), dan remot kontrolnya (fungsi setter). Kalau kamu memakai remot itu untuk mengganti nilai, React akan otomatis menggambar ulang (re-render) tampilanmu agar sesuai data terbaru.

👀 Contoh dulu

import { useState } from "react";
const [count, setCount] = useState(0);
setCount(count + 1);

Hasilnya: Count bertambah dan React merender ulang komponen secara otomatis.

💡 Selalu panggil useState di tingkat teratas komponen.

📝 Sekarang giliranmu

Deklarasikan variabel state bernama count dengan fungsi setternya setCount, dan beri nilai awal 0.

Preview