React Class Component vs Function Component
Pada tulisan ini kita akan membahas dua jenis component yang ada di React, React Class Component & React Function Component.
Kita bahas perbedaan dari kedua jenis component tersebut dari sisi cara membuat component, data handling dan lifecycle Methods.
React Class Component
Di awal versi react, semua React component ditulis menggunakan syntax ES6 Class.
Membuat Component
Data Handling
React menggunakan props & state untuk menghandle data di dalam component.
props bersifat read only dan biasa digunakan untuk mentransfer data dari parent component ke child component.
state digunakan untuk menghandle data yang sifatnya berubah-ubah, state hanya bisa diakses di dalam component dimana state itu dibuat, sehingga tidak bisa diakses dari component lain kecuali diubah menjadi props.
- Membuat state
- Update State
state tidak bisa diupdate langsung.
Pada code diatas jika kita ingin mengubah nilai state isVisible dari false ke true kita tidak bisa melakukannya seperti ini:
this.state.isVisible = true;namun harus menggunakan method khusus bernama setState().
Mengubah state tanpa menggunakan setState() membuat component tidak akan di re-render.
Lifecycle Methods
Dalam proses menampilkan component pada browser, React mengeksekusi beberapa method di balik layar.
Proses eksekusi ini dibagi menjadi beberapa fase yaitu Mounting, Updating dan Unmounting.
Pada setiap fase, React akan mengeksekusi beberapa _built-in_ method secara berurutan yang disebut lifecycle method.
Berikut diagram React Lifecycle Methods:
Sebagai contoh Lifecycle Method componentDidMount() akan dieksekusi setelah component selesai di render.
React Function Component
React Function Component adalah jenis React component yang memiliki syntax yang lebih simple dan memungkinkan kita untuk menggunakan React Hooks.
React Hooks pada dasarnya adalah function yang disediakan React untuk mempermudah kita dalam menggunakan state dan fitur React lain seperti lifecylce method, context dll.
Kita akan tulis ulang code yang sudah dibuat sebelumnya, namun kali ini menggunakan React Function Component.
Membuat Component
Untuk membuat component kita menggunakan function javascript biasa / arrow function:
Data Handling
- props
- state
Untuk membuat state pada React Function Component kita menggunakan React Hooks useState().
Dengan useState() kita dapat membuat dua hal sekaligus, state dengan nama isVisible dan method setState() bernama setVisible.
Namun perlu diperhatikan bahwa useState() menghasilkan dua value yang berpasangan, sehingga setVisible hanya bisa digunakan untuk mengupdate state isVisible.
- Update state
Lifecycle Methods
Pada React Function Component kita bisa mengganti lifecycle method componentDidMount() dan componentDidUpdate() dengan React Hook useEffect().
Pilih Mana ?
Banyak developer merekomendasikan untuk menggunakan Function Component karena syntax yang lebih simple dan dengan hadirnya React Hooks, sebuah Function Component dapat memiliki state, side effect dan lifecycle methods yang sebelumnya tidak bisa dilakukan.
Bahkan ada yang menyarankan untuk migrasi dari Class Component ke Function Component.
Tetapi semua kembali kepada kebutuhan dan kondisi.
React sudah ada sejak tahun 2013, mungkin diluar sana masih banyak React App yang menggunakan Class Component dan belum sepenuhnya migrasi ke Function Component atau bahkan tidak mungkin untuk migrasi karena ukuran project yang sudah terlalu besar. Pada kondisi ini memaksa migrasi dari Class Component ke Function Component bukanlah ide yang bagus.
Download full chapter eBook Full Stack Gate, kumpulan materi pendahuluan untuk memulai karir sebagai Full Stack Web Developer disini.
