State dengan useState

Mengapa butuh state?

Variable biasa tidak membuat React menggambar ulang layar dan nilainya hilang setiap render:

function Counter() {
  let angka = 0;
  return <button onClick={() => { angka++; }}>{angka}</button>;  // ❌ tidak berubah di layar
}

State adalah memori komponen: nilainya bertahan antar render, dan mengubahnya memicu React untuk merender ulang komponen.

useState

import { useState } from "react";

function Counter() {
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <p>{angka}</p>
      <button onClick={() => setAngka(angka + 1)}>+1</button>
    </div>
  );
}

• useState(0) → nilai awal 0.
• Mengembalikan pasangan: nilai saat ini (angka) dan fungsi pengubah (setAngka).
• Memanggil setAngka(...) → React menyimpan nilai baru dan merender ulang komponen.

Aturan hooks

Fungsi yang diawali use disebut hooks. Dua aturan penting:

1. Panggil hooks hanya di tingkat atas komponen — bukan di dalam if, loop, atau fungsi bersarang.
2. Panggil hooks hanya di komponen function atau custom hook.

State bersifat per-komponen

Setiap pemakaian komponen punya state sendiri:

<Counter />   // angka-nya sendiri
<Counter />   // angka-nya sendiri, terpisah

State adalah "snapshot"

Nilai state di dalam sebuah render tidak berubah sampai render berikutnya:

function klik() {
  setAngka(angka + 1);
  setAngka(angka + 1);   // angka masih nilai lama, jadi hanya naik 1!
}

Untuk memakai nilai terbaru berdasarkan nilai sebelumnya, gunakan updater function:

setAngka((a) => a + 1);
setAngka((a) => a + 1);  // naik 2 ✅

Contoh: tombol suka

function Suka() {
  const [suka, setSuka] = useState(false);
  return (
    <button onClick={() => setSuka(!suka)}>
      {suka ? "❤️ Disukai" : "🤍 Suka"}
    </button>
  );
}

Kapan memakai state?

Jika data berubah seiring waktu karena interaksi dan tampilan bergantung padanya. Jika nilai bisa dihitung dari props/state lain, jangan simpan sebagai state terpisah — hitung saja saat render.