Perbedaan utama antara props dan state di React ada pada dua hal: siapa yang memiliki data itu dan apakah data itu boleh berubah. props adalah data yang dikirim dari komponen induk ke komponen anak dan bersifat read-only (tidak boleh diubah oleh si anak), sedangkan state adalah data internal milik satu komponen yang boleh berubah seiring waktu dan setiap perubahannya membuat komponen tampil ulang (re-render). Kalau kamu bisa memegang satu kalimat ini, kamu sudah menguasai konsep yang paling sering bikin pemula React bingung.

Di panduan ini kamu akan memahami perbedaan props dan state benar-benar dari nol: apa itu props dan cara mengopernya, apa itu state dan kenapa harus pakai useState, kenapa props bersifat read-only, kapan sebuah data pantas jadi props dan kapan pantas jadi state, sampai kesalahan-kesalahan umum yang sering dilakukan pemula. Semua dengan contoh kode berbahasa Indonesia yang bisa langsung kamu coba. Kalau kamu masih asing dengan dasar JavaScript seperti fungsi dan object, ada baiknya baca dulu panduan JavaScript untuk pemula supaya fondasinya kuat.

Apa Itu Props?

Props (kependekan dari properties) adalah cara sebuah komponen React menerima data dari komponen di atasnya (induk). Anggap saja sebuah komponen React seperti sebuah fungsi: ia menerima input, lalu menghasilkan tampilan. Props inilah input-nya.

Bayangkan kamu punya komponen Sapaan yang tugasnya menampilkan sapaan untuk seseorang. Nama orangnya tidak ditulis mati di dalam komponen, ia dikirim dari luar lewat props:

// Komponen anak: menerima "nama" lewat props
function Sapaan(props) {
  return <h1>Halo, {props.nama}!</h1>
}

// Komponen induk: mengoper data lewat atribut
function App() {
  return (
    <div>
      <Sapaan nama="Budi" />
      <Sapaan nama="Sari" />
    </div>
  )
}

Perhatikan bagaimana App memanggil <Sapaan nama="Budi" />. Nilai "Budi" itu dikirim masuk dan bisa diakses di dalam Sapaan sebagai props.nama. Satu komponen yang sama bisa dipakai ulang dengan data berbeda, persis seperti memanggil satu fungsi dengan argumen yang berbeda-beda. Inilah kekuatan props: membuat komponen bisa dipakai ulang.

Di kode React modern, props biasanya langsung dibongkar (destructuring) supaya lebih ringkas:

// Sama seperti di atas, tapi lebih rapi
function Sapaan({ nama }) {
  return <h1>Halo, {nama}!</h1>
}

Props tidak terbatas pada teks. Kamu bisa mengoper angka, boolean, array, object, bahkan fungsi lewat props:

<KartuProduk
  nama="Kaos Polos"
  harga={75000}
  tersedia={true}
  onBeli={() => alert("Masuk keranjang!")}
/>

Apa Itu State?

State adalah data internal yang dimiliki dan dikelola oleh satu komponen itu sendiri. Bedanya dengan props: state tidak datang dari luar, melainkan lahir di dalam komponen, dan yang paling penting, state boleh berubah. Setiap kali state berubah, React otomatis menggambar ulang komponen itu supaya tampilannya selalu sesuai dengan data terbaru.

State dibuat menggunakan sebuah Hook bernama useState. Contoh klasiknya adalah tombol penghitung:

import { useState } from "react"

function Penghitung() {
  // "jumlah" adalah state, "setJumlah" fungsi untuk mengubahnya
  const [jumlah, setJumlah] = useState(0)

  return (
    <div>
      <p>Kamu klik sebanyak {jumlah} kali</p>
      <button onClick={() => setJumlah(jumlah + 1)}>
        Tambah
      </button>
    </div>
  )
}

Mari bedah baris const [jumlah, setJumlah] = useState(0):

useState(0) membuat sebuah state dengan nilai awal 0.
Ia mengembalikan dua hal dalam bentuk array: nilai state saat ini (jumlah) dan fungsi untuk mengubahnya (setJumlah).
Setiap kali kamu memanggil setJumlah(...), React menyimpan nilai baru dan menggambar ulang komponen, sehingga angka di layar ikut berubah.

Untuk memahami useState lebih dalam beserta latihan interaktif langsung di browser, kamu bisa mengerjakan pelajaran useState di Hyper Sheets yang membahasnya bertahap.

Perbedaan Props dan State (Ini Bagian Pentingnya)

Sekarang kita sampai ke inti. Meski props dan state sama-sama menyimpan data yang dipakai untuk menampilkan sesuatu, keduanya punya peran yang sangat berbeda. Diagram di bawah ini merangkum bagaimana data mengalir pada masing-masing:

PROPSdikirim dari luar · read-only

Komponen Induk<Profil nama="Budi" />

Komponen Anakprops.nama → "Budi"🔒 tidak boleh diubah anak

STATEmilik sendiri · bisa berubah

Satu Komponenconst [jml, setJml] = useState(0)

Tampilan Barujml → 1, lalu 2, lalu 3…✏️ boleh diubah, memicu render

Props datang dari induk dan bersifat tetap;state hidup di dalam komponen dan bisa berubah.

Perhatikan bedanya. Pada sisi props, data lahir di komponen induk lalu dikirim turun ke anak, dan anak hanya boleh membacanya. Pada sisi state, data hidup di dalam satu komponen, dan komponen itu sendiri yang berhak mengubahnya lewat setter, yang lalu memicu render ulang.

Supaya makin jelas, ini tabel perbandingannya:

Aspek	Props	State
Sumber data	Dikirim dari komponen induk	Dibuat di dalam komponen sendiri
Boleh diubah?	Tidak (read-only)	Ya, lewat fungsi setter
Siapa yang mengubah	Induk (dengan mengoper nilai baru)	Komponen itu sendiri
Tujuan utama	Membuat komponen bisa dipakai ulang	Menyimpan data yang berubah seiring waktu
Memicu re-render?	Ya, saat induk mengirim nilai baru	Ya, saat setter dipanggil

Cara paling mudah mengingatnya: props itu seperti argumen fungsi (datang dari pemanggil, kamu tidak mengubahnya di dalam fungsi), sedangkan state itu seperti variabel lokal yang “diingat” React di antara render. Keduanya sama-sama bisa memicu tampilan diperbarui, tapi pemicunya berbeda, props diperbarui oleh induk, state diperbarui oleh komponen itu sendiri.

Kenapa Props Bersifat Read-Only?

Mungkin kamu bertanya: kenapa React melarang anak mengubah props? Jawabannya soal prediktabilitas. Kalau komponen anak boleh diam-diam mengubah data milik induk, akan sangat sulit melacak dari mana sebuah perubahan berasal saat aplikasi membesar. Dengan aliran satu arah, kamu selalu tahu: data mengalir dari atas ke bawah, dan kalau ada yang berubah, pasti pemiliknya (induk) yang mengubahnya.

Kalau kamu mencoba mengubah props di dalam anak, React tidak akan menghentikanmu dengan error yang jelas, tapi hasilnya tidak akan tercermin di layar dan sering jadi sumber bug yang membingungkan:

function Sapaan({ nama }) {
  nama = "Andi"  // ❌ jangan lakukan ini, props read-only
  return <h1>Halo, {nama}!</h1>
}

Kalau si anak benar-benar butuh mengubah “nama”, maka “nama” itu seharusnya menjadi state milik induk, dan induk mengoper fungsi untuk mengubahnya. Pola inilah yang disebut lifting state up, memindahkan state ke komponen induk bersama supaya beberapa anak bisa berbagi dan mengubahnya lewat fungsi yang dioper. Konsep ini sangat penting dan bisa kamu dalami di pelajaran props di Hyper Sheets.

Kapan Pakai Props, Kapan Pakai State?

Ini pertanyaan praktis yang paling sering muncul. Panduan sederhananya, tanyakan pada dirimu sendiri:

Apakah data ini datang dari komponen lain di atasnya? Kalau ya, itu props.
Apakah data ini bisa berubah karena interaksi pengguna (klik, ketik, toggle) di dalam komponen ini? Kalau ya, itu state.
Apakah data ini bisa dihitung dari props atau state yang sudah ada? Kalau ya, jangan jadikan state, cukup hitung saat render. Membuat state yang berlebihan (redundant state) adalah sumber bug klasik.

Contoh konkret sebuah komponen form yang menggabungkan keduanya:

function KotakKomentar({ penulis }) {
  // penulis = PROPS (dikirim induk, tetap)
  // teks = STATE (berubah saat pengguna mengetik)
  const [teks, setTeks] = useState("")

  return (
    <div>
      <p>Komentar oleh: {penulis}</p>
      <textarea
        value={teks}
        onChange={(e) => setTeks(e.target.value)}
      />
      <p>Panjang: {teks.length} karakter</p>
    </div>
  )
}

Di sini penulis adalah props, datang dari luar dan tidak berubah selama komponen hidup. Sementara teks adalah state, berubah setiap kali pengguna mengetik di <textarea>. Perhatikan juga bahwa “panjang karakter” tidak dibuat jadi state tersendiri; ia cukup dihitung dari teks.length saat render. Itu contoh menghindari redundant state.

Kesalahan Umum Pemula

Beberapa jebakan yang hampir semua pemula React alami saat pertama kali membedakan props dan state:

1. Mengubah state secara langsung. Seperti sudah dibahas, jumlah++ atau array.push(...) pada state tidak akan memicu render. Selalu gunakan setter, dan untuk array/object buat salinan baru: setDaftar([...daftar, itemBaru]).

2. Menyalin props ke state tanpa alasan. Menulis const [nama, setNama] = useState(props.nama) sering keliru, kalau props induk berubah, state ini tidak ikut ter-update karena nilai awal hanya dibaca sekali. Pakai props langsung kecuali kamu memang butuh menyimpan versi yang bisa diedit pengguna.

3. Membuat terlalu banyak state. Kalau sebuah nilai bisa dihitung dari state/props lain (seperti teks.length), jangan jadikan state terpisah. Semakin sedikit state, semakin sedikit bug.

4. Lupa bahwa update state bersifat asinkron. Setelah setJumlah(jumlah + 1), nilai jumlah di baris berikutnya masih nilai lama. React menjadwalkan update, bukan langsung mengubahnya di tempat.

Cek Pemahaman

Sebuah komponen anak menerima "nama" dari induknya lewat atribut. Di dalam anak, apakah "nama" ini termasuk props atau state, dan apakah boleh diubah oleh anak?

FAQ Seputar Props dan State di React

Apa perbedaan props dan state dengan bahasa sederhana?

Props adalah data yang dikirim dari komponen lain (induk) dan tidak boleh diubah oleh komponen yang menerimanya. State adalah data milik komponen itu sendiri yang boleh berubah seiring waktu. Singkatnya: props datang dari luar dan tetap, state lahir di dalam dan bisa berubah.

Apakah props bisa diubah?

Tidak. Props bersifat read-only, komponen yang menerima props hanya boleh membacanya, bukan mengubahnya. Kalau kamu butuh data yang bisa berubah, gunakan state. Kalau anak perlu “mengubah” sesuatu milik induk, induk harus mengoper sebuah fungsi lewat props yang bisa dipanggil oleh anak.

Apa itu useState di React?

useState adalah Hook bawaan React untuk membuat state di dalam sebuah komponen. Ia mengembalikan dua hal: nilai state saat ini dan fungsi untuk mengubahnya. Contoh: const [jumlah, setJumlah] = useState(0) membuat state jumlah bernilai awal 0 dan fungsi setJumlah untuk mengubahnya.

Kenapa harus pakai setState/setter, tidak boleh langsung?

Karena React perlu tahu kapan datanya berubah supaya bisa menggambar ulang komponen. Kalau kamu mengubah nilai secara langsung (misalnya jumlah = 5), React tidak menyadari perubahan itu dan layar tidak diperbarui. Fungsi setter (setJumlah) adalah cara memberi tahu React: “data berubah, tolong render ulang”.

Bisakah satu komponen punya props dan state sekaligus?

Sangat bisa, dan itu hal yang normal. Contohnya komponen form yang menerima penulis lewat props (dari induk) sekaligus menyimpan teks yang diketik pengguna sebagai state. Props menangani data yang datang dari luar, state menangani data yang berubah di dalam.

Apakah perlu belajar JavaScript dulu sebelum React?

Ya, sangat disarankan. React dibangun di atas JavaScript, dan konsep seperti fungsi, array, object, serta arrow function dipakai di mana-mana. Kalau dasar JavaScript-mu belum kuat, banyak sintaks React akan terasa seperti sihir. Mulai dari panduan JavaScript dari nol dulu, baru lanjut ke React.

Kesimpulan

Perbedaan props dan state adalah salah satu fondasi paling penting dalam React, dan begitu kamu memahaminya, banyak konsep lanjutan akan terasa jauh lebih masuk akal. Ingat inti sederhananya: props datang dari induk dan read-only, state milik komponen sendiri dan bisa berubah. Saat mendesain komponen, tanyakan dari mana sebuah data berasal dan apakah ia perlu berubah, jawabannya langsung menentukan apakah ia harus jadi props atau state.

Langkah berikutnya yang masuk akal adalah mempraktikkan langsung: buat komponen kecil dengan useState, oper data lewat props ke beberapa anak, dan rasakan bagaimana aliran data satu arah bekerja. Kamu bisa mulai dari pelajaran props interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup apa pun.