Bab 2: State & Interaktivitas

Menghidupkan komponen dengan data yang dapat berubah.

Apa itu State?

Jika Props adalah data yang (diberikan) ke sebuah komponen (bersifat read-only), maka State adalah (memori) internal komponen itu sendiri. State adalah data yang dapat berubah seiring waktu karena interaksi pengguna.

Setiap kali nilai state berubah, React akan secara otomatis **me-render ulang** komponen tersebut untuk menampilkan tampilan yang baru. Untuk menggunakan state, kita memerlukan sebuah *Hook* bernama useState.

Menggunakan `useState`

Hook `useState` adalah cara kita mendeklarasikan sebuah (state variable) di dalam komponen fungsional.

1. Cara Mengimpor dan Mendeklarasikan

Pertama, impor `useState` dari React. Kemudian, panggil di dalam komponen Anda untuk membuat state.

import { useState } from 'react';

function MyComponent() {
  const [nilai, setNilai] = useState(nilaiAwal);
  // ...
}

`useState` mengembalikan sebuah array dengan dua elemen:

nilai: Variabel yang menyimpan nilai state saat ini.
setNilai: Fungsi yang kita gunakan untuk memperbarui nilai state.

2. Contoh Praktis: Tombol Counter

Mari kita buat tombol sederhana yang akan menghitung berapa kali ia diklik.

Contoh Kode:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Jumlah klik: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Klik Saya!
      </button>
    </div>
  );
}

Hasil Tampilan Interaktif:

Jumlah klik: 0

3. Contoh Lain: Tombol Suka (Like)

State tidak harus berupa angka. Ia bisa berupa boolean (`true`/`false`), string, objek, atau array.

Contoh Kode:

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️ Disukai' : '🤍 Suka'}
    </button>
  );
}