lifelong learner — urip iku urup, currently working on accenture.

React : state , props & lifecycle

1
Degananda.com -

State adalah asal dari suatu data. Komponen pada react tentunnya membutuhkan data (tidak semua namun rata-rata membutuhkan data). Data tersebut dapat berasal dari mana saja. State adalah salah satu sumber data tersebut. Selain state data dari komponen juga dapat berasal dari props (bukan property).

Ulasan ini akan membahas penggunaan state, props dan lifecycle dan dihubungkan dengan komponen. Yang perlu digaris bawahi adalah state merupakan sumber data. State adalah data yang dikelola secara private oleh suatu komponen. Sedangkan props adalah sumber data yang berasal dari parent yang dapat digunakan pada turunan komponennya. Anggaplah state = internal dan props external.

state vs props

State dan props merupakan dua jenis data yang dapat digunakan oleh komponen. Props merupakan data yang fix (karena diambil dari parent atau di set oleh parent dari komponen tersebut). Sedangkan state digunakan untuk data yang berubah. State akan di inisiasi pada constructor(dynamic) sedangkan props menjadi parameter pada construtor sehingga tidak dapat berubah (fixed). berikut ini adalah kode yang menggambarkan antara props dan state.

constructor(props){
  super(props);
  this.state = {
    nama : 'degananda ferdian priyambada from state'
  }
}

render() {
  return (
    <div>
      <p>{this.state.nama}</p>
      <p>{this.props.nama}</p>
    </div>
  );
}

props tidak dilakukan inisiasi pada komponen tersebut melainkan didapatkan dari parent. sedangkan super kita lakukan inisiasi pada constructor sehingga data-data yang dapat berubah pada suatu komponen adalah data state. Berikut ini adalah index.js letak kode untuk melakukan render komponen tersebut dimana kita memberikan paramter nama (untuk props) sehingga dapat digunakan pada komponen child (<app>) yang mana props tersebut bersifat immutable (tidak dapat berubah).

ReactDOM.render(<App nama="degananda ferdian priyambada from props" />, document.getElementById('root'));

kode diatas akan menghasilkan tampilan seperti berikut ini

itulah perbedaan singkat mengenai props vs state. Setelah mengetahui perbedaan antara props dan state kita akan bahas lebih dalam masing-masing mengenai props dan state (ditambah juga dengan pembahasan lifecyle karena berhubungan dengan props , state serta komponen).

State + lifecycle

Pada pejelasan diatas telah dijelaskan bahwa state merupakan data yang tersimpan pada komponen yang bersifat mutable a.k.a dapat berubah. Misalnya kita ingin membuat suatu data yang berubah-ubah dalam jangka waktu tertentu dengan menggunakan fungsi setInterval(). Demonstasi ini ditujukan agar kita mengetahui bahwa data dalam state dapat berubah. Definisi berubah ini lebih ke arah true / false. True maka data tersebut ada pada komponen dan false data tersebut tidak ada pada komponen tersebut.

constructor(props){
  super(props);
  this.state = {
    showNama : false,
    nama : 'degananda ferdian priyambada from state'
  }

  // kontrol state dengan setInterval(timer)
  setInterval(
    () => {
      this.setState(
        (prevState) => {
          return {
            showNama : !prevState.showNama
          }
        }
      )
    }, 5000
  );

}

render() {
  return (
    <div>
      <p>{this.state.showNama ? this.state.nama : ' '}</p>
    </div>
  );
}

setInterval adalah fungsi pada javascript yang digunakan untuk mengeksekusi kode tertentu pada jangka waktut tertentu. Pada kasus diatas kami mengeksekusi fungsi setState() yang memiliki return berupa prevState atau state sebelumnya (nama dari variabel return bebeas) yang artinnya, pada detik saat dieksekusi state yang dipanggil adalah state yang diset sebelumnya. Maka pola state (showNama) adalah

pada detik ke-0 = false

pada detik ke-1 = false

pada detik ke-2 = fasle

pada detik ke-3 = false

pada detik ke-4 = false

pada detik ke-5 = true (dilakukan negasi dari nilai state, nilai awal state showNama adalah true)

Penggunaan state ini akan memberikan kita kebebasan dalam menentukan kapan kita membutuhkan suatu data which is very good, mengurangi konsumsi memory. Layaknya “teman” yang hanya datang ketika membutuhkan heheh (lupakan ini , hanya sedikit jokes). Jika kode diatas kita eksekusi pada brwoser maka text diatas akan muncul setiap 5 detik sekali. Inilah power of state dalam react. Berikut ini adalah tampilan pada browser ketika kode diatas dieksekusi.

NB : Penjelasan lebih lanjut(a bit) mengenai lifecycle ada dibagian bawah(ulasan ini) mengenai  life cycle , mounting dan unmounting.

a. detik ke 0 sampai 4

b. detik ke 5.

c. detik ke 6

Props

Props bersifat immutable maka dapat dikatakan sebagai data yang readonly a.k.a hanya dapat di baca/di akses tidak dapat dilakukan perubahan. Pada contoh diatas kita hanya memberikan nilai props berupa literal biasa (string). Props juga dapat menerima suatu object. Contohnya adalah seperti pada dibawah ini

constructor(props){
  super(props);
}

render() {
  return (
    <div>
      <p>{this.props.biodata.nama}</p>
      <p>{this.props.biodata.alamat}</p>
    </div>
  );
}

Kode untuk menginisiasi komponen tersebut adalah

ReactDOM.render(<App biodata={biodata}/>, document.getElementById('root'));

kedua kode diatas jika dijalankan akan menghasilkan tampilan sebagai berikut ini.

Life cycle

life cycle dalam bahasa indonesia berarti siklus hidup. Jika berbicara tentang siklus hidup tentunya pasti ada fase “hidup” yang mana misalnya kita berbicara mengenai katak berawal dari kecebong (mohon maaf kalau salah mohon dikoreksi) hingga menjadi katak lalu kemudian mati. Pada react juga demikian, namun disini kita tidak membahas sepenuhnya mengenai life cycle, melainkan membahas tentang bagaimana mendestroy maupun menghidupkan “state” pada komponen.

Pada bagian mengenai state kita menggunakan timer(setInterval()). Pada react life cycle dapat digunakan untuk mendestroy maupun menghidupkan state. Pada react destroy / hidup kenal dengan sebutan mount (hidup) dan unmount (mati). Proses menghidup dan mematikan ini dihandle dengan menggunakan fungsi setState dimana telah kita bahas pada bagian state.

this.setState(
  (prevState) => {
    return {
      showNama : !prevState.showNama
    }
  }
)

inilah yang disebut dengan lifecyle dari. Kita dapat melakukan mounting dan unmounting suatu state dengan menggunakan fungsi setState(). Proses perubahan state pada fungsi setState ini bersifat async. dan React hanya akan mengubah elemen pada DOM yang melakukan perubahan.

  • Bimon Ada Disini

    Setelah beberapa kali ngubek2 artikel-artikel tutorial React Pemula, saya menemukan jawaban atas masalah di kode saya dari artikel ini. Tapi malah muncul pertanyaan baru dan jadi makin penasaran utk baca-baca lagi dokumentasi react. Terima kasih kawan atas share ilmu nya. Keep it up !