STATE REACT

State digunakan untuk menyimpan data yang bisa berubah seiring waktu. Saat state berubah, tampilan UI akan otomatis ikut berubah.

🧠 Apa Itu State?

Di React, state adalah tempat untuk menyimpan data dinamis dalam komponen. Berbeda dengan props yang dikirim dari luar, state dikelola di dalam komponen itu sendiri.

Contoh penggunaan:

• Menyimpan jumlah klik tombol
• Menyimpan input dari pengguna
• Menyimpan data hasil fetch dari API

📦 Menggunakan useState

React menyediakan hook useState untuk mengelola state dalam komponen fungsional. Dengan useState, kita bisa membuat variabel state dan fungsi untuk mengubahnya.

Contoh Dasar useState

import { useState } from 'react';

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

  return (
    <div>
      <p>Kamu menekan tombol sebanyak {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik aku
      </button>
    </div>
  );
}

Penjelasan

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

• count → nilai state saat ini
• setCount → fungsi untuk mengubah state
• useState(0) → nilai awal state adalah 0

Saat kamu klik tombol:

setCount(count + 1)

React akan:

1. Mengubah nilai count
2. Merender ulang komponen
3. Menampilkan UI yang baru

⚠️ Penting: Jangan ubah state langsung

❌ Jangan lakukan ini:

count = count + 1; // SALAH

✅ Gunakan setCount:

setCount(count + 1); // BENAR

🎯 Kapan Menggunakan State?

Gunakan state ketika:

• Kamu butuh menyimpan nilai sementara
• Kamu ingin mengubah UI saat terjadi interaksi pengguna