Props dan State: Cara Data Mengalir di React

Di episode #51 kamu sudah bisa bikin component dan menulis JSX. Tapi component statis itu membosankan: tampilannya tidak pernah berubah. Aplikasi nyata itu hidup: angka bertambah saat diklik, form terisi saat diketik, daftar bertambah saat ada data baru.

Rahasia "hidupnya" React ada pada dua konsep: props dan state. Keduanya adalah cara data masuk dan tinggal di dalam component. Pahami bedanya, dan kamu memahami 80% cara kerja React.

Analoginya: Restoran dan Kokinya

Bayangkan sebuah restoran. Ada dua jenis informasi di dapur:

• Pesanan dari pelanggan (props): datang dari luar, koki tidak boleh mengubahnya seenaknya. "Meja 5 pesan mie goreng" ya mie goreng yang dibuat. Kalau pelanggan mau ganti pesanan, ia bilang ke pelayan, bukan koki yang mengarang sendiri.
• Catatan internal koki (state): milik koki sendiri dan boleh diubah: berapa porsi yang sudah jadi, kompor mana yang menyala, stok yang tersisa. Saat catatan ini berubah, koki menyesuaikan kerjanya.

Dalam React: props adalah data yang dikirim dari component induk ke component anak (seperti pesanan pelanggan), bersifat read-only bagi penerimanya. State adalah data milik component itu sendiri yang bisa berubah seiring waktu (seperti catatan koki), dan setiap kali berubah, React me-render ulang component tersebut.

Props: Data Titipan dari Induk

Kamu sudah melihat sekilas di episode #51. Ini versi lengkapnya:

function Sapaan({ nama, umur }) {
  return <p>Halo {nama}, umurmu {umur} tahun.</p>;
}

function App() {
  return (
    <div>
      <Sapaan nama="Dita" umur={17} />
      <Sapaan nama="Bima" umur={20} />
    </div>
  );
}

Perhatikan: string ditulis langsung (nama="Dita"), tapi angka dan ekspresi dibungkus kurung kurawal (umur={17}). Ini konsisten dengan aturan JSX: {} berarti "ini JavaScript".

Aturan keras props: component anak tidak boleh mengubah props yang diterimanya. Kalau Sapaan mencoba nama = "X", itu melanggar kontrak. Kenapa aturannya ketat begitu? Karena kalau setiap anak bisa mengubah data seenaknya, aliran data jadi kacau dan bug sulit dilacak. React menegakkan one-way data flow: data mengalir satu arah, dari induk ke anak. Selalu.

State: Ingatan Component

State dibuat dengan hook bernama useState. Hook adalah function khusus React yang diawali kata use. Polanya selalu sama:

import { useState } from "react";

function Penghitung() {
  const [jumlah, setJumlah] = useState(0);

  return (
    <div>
      <p>Jumlah: {jumlah}</p>
      <button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
    </div>
  );
}

Bedah baris kuncinya: const [jumlah, setJumlah] = useState(0). Ini memakai destructuring array (episode #46!):

• jumlah: nilai state saat ini. Angka 0 adalah nilai awal, dipakai hanya saat pertama render.
• setJumlah: function khusus untuk mengubahnya. Ini satu-satunya cara yang benar untuk mengubah state.

Saat setJumlah dipanggil, React mencatat nilai baru, lalu me-render ulang component Penghitung dengan nilai terbaru. Tombol diklik, angka bertambah di layar. Itulah keajaiban yang dijanjikan episode #50: kamu ubah datanya, React yang mengurus tampilannya.

function PenghitungRusak() {
  let jumlah = 0;
  return (
    <div>
      <p>Jumlah: {jumlah}</p>
      <button onClick={() => { jumlah = jumlah + 1; }}>Tambah</button>
    </div>
  );
}

Kapan Pakai Props, Kapan Pakai State?

Aturan praktisnya:

• Props: untuk data yang component butuhkan tapi tidak ia kelola. Component Tombol tidak perlu tahu kenapa labelnya "Simpan", ia cuma menampilkannya.
• State: untuk data yang berubah karena interaksi user atau waktu: isi form, tombol on/off, data dari API, halaman aktif.

Kesalahan umum pemula ada dua arah: menaruh SEMUA data di state (termasuk nilai tetap yang tidak pernah berubah, bikin kode ribet), atau lupa menaruh data dinamis di state (seperti contoh rusak di atas, tampilan tidak pernah update).

Pertanyaan yang bagus untuk melatih insting: "apakah nilai ini bisa berubah selama component hidup, dan apakah perubahannya harus terlihat di layar?" Kalau ya untuk keduanya, itu state.

Persepsi yang Perlu Diluruskan

Persepsi salah 1: "Props dan state itu hampir sama, tinggal pilih salah satu." Fungsinya berlawanan: props untuk komunikasi antar component (satu arah, read-only), state untuk ingatan internal (bisa berubah, memicu render ulang). Tertukar memakai keduanya adalah sumber bug paling umum di React pemula.

Persepsi salah 2: "Render ulang itu mahal, harus dihindari." Justru sebaliknya: render ulang adalah mekanisme NORMAL React, ia dirancang untuk itu dan sangat dioptimasi (hanya bagian yang berubah yang di-update di DOM asli). Jangan takut pada render ulang, takutlah pada state yang tidak terkelola.

Latihan: Penghitung yang Bisa Diatur

1. Buat component Penghitung dengan state jumlah seperti contoh di atas. Tambahkan tombol "Kurang" dan tombol "Reset ke 0". Ini melatihmu memakai setter untuk berbagai operasi.
2. Ubah component-mu supaya nilai langkahnya (tambah 1 atau tambah 5?) diterima sebagai props dari induk. Rasakan bedanya: yang berubah-ubah jadi state, yang dikonfigurasi dari luar jadi props.
3. Sengaja coba versi "rusak" (variabel biasa tanpa useState), klik tombolnya, dan amati bahwa layar tidak berubah. Pengalaman langsung ini lebih menancap daripada sekadar baca.

Di episode berikutnya kita bahas Event Handling dan Form di React: cara menangani klik, ketikan, dan submit dengan pola React, termasuk konsep "controlled component" yang wajib dikuasai setiap pembuat form. Sampai jumpa.