Tutorial ReactJS: Perbedaan State dan Props

Ketika kita berbicara tentang ReactJS, tentunya tidak akan asing lagi dengan yang namanya state dan props. Kedua istilah tersebut akan sering muncul dan membuat bingung ketika teman-teman sedang belajar ataupun baru menggunakan framework buatan facebook ini.

Ada beberapa pertanyaan yang muncul dan sering sekali ditanyakan oleh teman-teman. Misalnya, apa perbedaan state dan props dan kapan harus menggunakan state? Dan kapan pula props digunakan? Sudah banyak artikel yang membahas materi ini, namun saya akan mencoba untuk merangkum kembali dengan bahasa yang lebih manusiawi.

Namun, sebelumnya kita akan membahas secara singkat apa itu component pada react, karena basic dari penggunaan react adalah sebuah component.

Apa itu component?

Sebuah component memuat data dan UI (User Interface) yang saling terikat satu sama lain. Data dan UI tidak dapat dipisahkan hubungannya.

Ketika kamu menggunakan react, maka kamu harus paham konsep bahwa UI bergantung pada data. Ketika kamu ingin mengubah UI, ubahlah datanya!

Pastikan kamu benar-benar menanamkan konsep di atas dalam pikiranmu. Konsep ini memang cukup membingungkan jika kamu belum pernah menggunakan framework js seperti angular/vue. Sebenarnya konsep ini mirip juga ketika kamu menggunakan angularJS (versi 1.x) yang terkenal dengan jargonnya: MVVM pattern dan two way binding.

Component pada react dapat dibuat menggunakan 2 cara, yang pertama adalah functional component dan yang kedua adalah class component. Functional component biasanya diterapkan ketika kamu ingin membuat component yang simple dan hanya menerima props. Sebutan lain bagi functional component adalah stateless component. Sedangkan ketika kamu ingin membuat component yang cukup kompleks, kamu bisa menggunakan class component/stateful component. Perbedaan stateless dan stateful component akan saya bahas juga di kemudian hari.

Sebuah component memiliki data di dalamnya yang saling berhubungan dengan UI. Berbicara tentang data, kita akan mulai memasukin materi utama kita yaitu State dan Props.

Apa itu props?

Props (prop in plural), merupakan singkatan dari property. Kalau kamu sudah fasih menggunakan HTML, pastinya tidak akan bingung lagi dengan istilah property. Cara penggunaannya mirip ketika kamu menambahkan attribut pada tag HTML.

Berikut adalah contoh penggunaan props pada functional dan class component.

Nilai prop dipassing layaknya attribut HTML. Nilai tersebut bersifat read-only (hanya bisa dibaca/digunakan, tidak boleh diubah dari dalam). Oleh karena itu, biasanya props digunakan untuk berkomunikasi antar component. Jika kamu mempunyai component yang di dalamnya component, maka kamu bisa melempar data dari parent ke child.

Apa itu state?

State merupakan data yang tersimpan dalam sebuah component. State bersifat private dan hanya relevan terhadap component itu sendiri. Berbeda dengan props yang valuenya dilempar dari component lain, state justru dapat menyimpan dan mengubah datanya sendiri dari dalam.

State hanya dimiliki oleh class component. Kamu tidak dapat menggunakan state ketika menggunakan functional component. Namun, sejak versi react 16.8, kamu bisa menggunakan state di functional component dengan bantuan react hooks. Materi ini akan saya tulis di artikel selanjutnya.

Sebagai contoh, kita akan buat contoh kasus untuk menyimpan serta mengubah state.

Data money yang ada di dalam state hanya relevan terhadap component Dompet itu sendiri. Kita dapat mengubah nilai dari sebuah state dari dalam component itu juga, seperti yang dilakukan oleh fungsi gajian().

Fungsi gajian tersebut akan mengubah nilai state money menjadi 100000. Ketika state berubah, maka tampilan sisa uang akan otomatis di-render ulang. Inilah konsep yang saya jelaskan di atas, mengubah data akan mengubah UI juga.


State dan props bisa digunakan sekaligus di dalam component yang sama. Kamu tinggal sesuaikan kondisinya, kapan harus menggunakan state dan kapan pula props digunakan. Intinya:

  • Gunakan state jika kamu ingin mengolah data yang bersifat internal di dalam component itu sendiri.
  • Gunakan props jika kamu ingin/sedang berkomunikasi (melempar data) dengan component lain.

Demikianlah artikel tentang Tutorial ReactJS: State vs Props, mudah-mudahan mudah dimengerti. Silahkan tinggalkan komentar jika ada pertanyaan lebih lanjut. Terima Kasih 🙂