React Prop & State, Apa bedanya ?

Tahukah anda kenapa library ini disebut React ?
Karena react adalah library yang bereaksi terhadap data

Prop & State, dua hal yang sering membuat bingung bagi yang baru masuk ke dunia react. Keduanya terlihat mirip tapi ada bedanya ? Kapan harus menggunakan State ? Kapan harus menggunakan Prop ?

Baiklah saya akan mencoba menjelaskannya dalam bahasa yang lebih manusiawi.

1. Mari kita mulai dari Component

React is all about components. Component adalah bagian-bagian kecil dari suatu aplikasi. Komponen-komponen ini nantinya diracik menjadi sebuah aplikasi. Sebagai tukang racik yang budiman anda harus paham bahwa ada 2 unsur penting dalam component yaitu UI (User Interface) & Data, rumusnya

UI = f(data)

Gak perlu mules dengan rumus diatas, itu cuma rumus sederhana artinya jika ingin merubah UI maka rubahlah datanya.

Type data pada component react itu cuma dua yaitu Prop dan State.Dari sisi programming component react itu dibuat dengan function atau class, wujudnya kira-kira seperti ini:

Ok sejauh ini ingat saja konsep dasarnya adalah :

  1. Jika data berubah maka component berubah ( render ulang )

Lalu mana yang terbaik ?
Keduanya sama-sama baik.

Lalu bedanya apa ?

  • Untuk sekarang ingat saja functional component tidak memiliki state, itu sebabnya barang ini biasa disebut stateless component.

2. Prop

Prop singkatan dari Property. Ini cukup simple, apalagi jika anda sudah terbiasa dengan HTML, ini mirip seperti atrribute pada tag HTML. Dalam pembuatannya, jika dalam functional component maka prop ini adalah parameternya. Jika componentnya dalam bentuk class maka prop ini property dari class nya yang di akses melalui keyword ‘this’. Ahh ribet ini contohnya :

Functional Component
Class Component

Berikut beberapa poin penting dalam Prop

  • Prop itu read-only. Perhatikan contoh function ComponentA diatas, function ini hanya bisa membaca parameter props tetapi tidak bisa merubahnya. Yang bisa merubahnya adalah pemanggilnya yaitu <ComponentA />

3. State

State adalah data private sebuah component. Data ini hanya tersedia untuk component tersebut dan tidak bisa di akses dari component lain. Component dapat merubah statenya sendiri. Supaya lebih jelas mari kita lihat implementasi pada component counter.

Cara kerja component ini sederhana :

  1. default valuenya adalah 0.

Mari kita kupas satu persatu:

  1. Inisialisi state.
    Pada beberapa contoh inisialisasi di buat dengan menggunakan constructor(). Tapi saya lebih memilih style ini. karena lebih simple

4. Tanya dong

Bisa gak sih component memiliki state & props sekaligus ?

Bisa. Sebagai contoh kasus, kita akan membuat component counter lebih dinamis. Component tersebut harus dapat di set default valuenya.

dan component counternya menjadi seperti ini :

Ada berapa sih type component ?

Cuma 2, Stateless dan Statefull

  1. Stateless Component — tidak memiliki state hanya prop. Umumnya component ini di buat dengan function karena codenya lebih ringkas

Apakah setiap component wajib memiliki state atau props ?

Tidak. State & Props digunakan untuk membuat component yang lebih dinamis.

Adakah cara agar component bisa merubah prop nya sendiri ?

Ada. Caranya dengan dengan callback atau dengan kata lain child component merequest ke parent component untuk merubah prop nya.

Source : https://gist.github.com/SastraNababan/9d71f255e2ba8b80ffe958e29be0e411

Kapan saat yang tepat untuk menggunakan props atau state ?

Perubahan data pada props dan state akan merender ulang component.

  • Gunakan props untuk komunikasi data antar komponent ( parent to child component )

Ada pertanyaan lain ?

Jangan sungkan, mainkan jarimu di kolom komentar :D

Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share. Jika anda tertarik belajar lebih dalam tentang react native silahkan isi email anda disini

Coderupa

Panduan Praktis Belajar Javascript

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store