Sebelum saya bahas tentang function dan class di react, saya ingin curhat sedikit.
Tujuan awal saya belajar react adalah untuk meningkatkan user-experience proyek-proyek yang saya buat menggunakan codeigniter.
Memangnya kenapa dengan user experience?
Oh iya, kalau tidak ingin baca curhatan saya ini, langsung skip kesini saja.
Banyak client yang mengeluhkan proyek-proyek yang saya buat dengan codeigniter terasa lemot ketika digunakan.
Bukan salah codeigniternya sih, tapi karena rendering UI yang lama! Maklum, saya masih menggunakan library javascript legendaris sepanjang masa: JQUERY!
Ketika si client ingin melihat laporan keuangan, dia harus menunggu sampai ~ 10 detik. Mau bagaimana lagi, jquery menghabiskan waktu cukup lama untuk “mencerna dan menampilkan” data JSON yang dimuntahkan oleh backend codeigniter tersebut.
Jquery sangat bergantung pada DOM, dan mengakses dan mengolah DOM langsung menjadi mahal ketika dilakukan secara masif.
Belum lagi, browser jadi Not Responding gegara client meminta request 5000 data sekaligus.
Argh…
… lemot sekali.
Semua proyek yang saya buat menggunakan Jquery.
Ini ada gambar referensi kelebihan dan kekurangan jquery:
referensi: What is Jquery.
Sampai suatu hari, yaitu awal tahun 2020 ini (harinya lupa).
Saya menemukan situs yang performa-nya sangat bagus. Untuk berpindah halaman, cukup klik … sep… halaman sudah ter-load. Meminta data ratusan bahkan ribuan, terjadi dalam waktu yang singkat.
Nah, ini saya penasaran sekali, kok bisa demikian cepat ya?
Dengan kecepatan yang luar biasa seperti itu, user-experience (pengalaman pengguna) web tersebut pasti sangat bagus. Para usernya ibarat berselancar di localhost!
Kemudian, saya mulai mencari-cari berbagai referensi teknologi yang dipakai situs itu.
Ternyata saya menemukan fakta bahwa si-empunya menggunakan react untuk membangun UI-situsnya.
Oh, apa itu React?
Untuk mengenalnya, ada sedikit penjelasan yang saya tuangkan di artikel sebelumnya, ReactJS : Library Javascript untuk Meningkatkan Performa Codeigniter.
Perjalanan saya meningkatkan performa proyek-proyek saya (backend: codeigniter) menggunakan react pun dimulai sejak saat itu.
Nah disini saya cuma menuangkan sedikit pengetahuan yang saya dapatkan dari belajar react kesana-kemari.
Saya memulai dengan mencari perbedaan class dan function. Kenapa harus ini? Soalnya, ketika awal mulai belajar react, saya mendapati dua hal.
Banyak tutorial yang menulis tentang react menggunakan class component.
Kemudian, ketika saya membuat project react di localhost debian:
npx create-react-app areablogger
Kode yang muncul di App.js adalah kode yang menggunakan function!
Jadi, apa beda keduanya?
Setelah saya riset cukup panjang, inilah yang saya temukan.
Perbedaan Class dan Function pada ReactJS Sebelum React 16.8
Sebelum React melakukan update ke versi 16.8, class masih menjadi metode paling populer dalam pembuatan komponen dibandingkan function. Hal inilah yang membuat banyak tutorial react yang menggunakan class.
Update versi 16.8 ini terjadi dalam waktu dekat, sedangkan react sudah ada sejak 2013.
Apa bedanya class dan function sebelum versi 16.8?
- Class bisa menggunakan state
- Class bisa menggunakan props
- Class ada lifecycle hooks
- Class meng-output menggunakan render() method
- Function tidak bisa menggunakan state
- Function bisa menggunakan props
- Function tidak bisa mengakses lifecycle hooks
- Function meng-output dengan return()
Pada saat itu, function dipandang sebagai stateless component dan class dipandang sebagai stateful component.
Wait, what?
Apa itu state? Stateless? Stateful?
Kalau Anda belum pernah masuk ke dunia react maka ‘state‘ ini agak membingungkan.
Bukan tanggung jawab saya dalam menjelaskan tentang state ini, apalagi tentang props dan lifecycle hooks kepada Anda.
Hahaha…
Kalau memang Anda penasaran, Anda bisa membaca tentang apa itu state dan props disini: React Prop & State, Apa bedanya ?
Masih bingung?
Saya rangkum saja:
- State adalah variabel-dan-nilai yang tersimpan di component yang Anda buat
- Stateless artinya component yang tidak mampu mengolah state sendiri
- Stateful sebaliknya dari stateless
- Props adalah data yang di turunkan dari component parent ke child
- Emit adalah cara component child untuk mengirim event ke component parent
Fungsi state ini untuk melakukan manipulasi data pada komponen, menyimpan input user sementara, dsb. Persis konsep property pada OOP PHP.
Apa itu props, component parent dan component child?
Untuk memahaminya, Anda harus memahami apa itu component dalam react.
Saya beri contoh saja:
- Ada dua component.
- Component pertama bernama Susanto.
- Component kedua bernama Rudi.
- Susanto memberikan Rudi sebuah roti.
- Rudi memakan roti tersebut sampai habis.
- Susanto meminta roti kepada Rudi, tapi Rudi tidak bisa memberikannya karena sudah habis.
Dalam kasus tersebut, Susanto adalah Component Parent dan Rudi adalah Component Child. Sedangkan Roti adalah Props.
Kenapa Component Susanto bisa disebut parent?
Dalam implementasinya di dunia nyata, suatu component yang membawahi component lain akan disebut dengan parent.
Oke, kita langsung ambil contoh di dunia nyata (maksudnya dunia programming web) saja.
Perhatikan kode HTML berikut:
<body>
<div class="wrapper">
<div class="header">
<h1>Halo Pembaca Areablogger.com</h1>
</div>
</div>
</body>
Kode <body> membawahi kode <div class="wrapper">.
Maka <body> adalah parent dari <div class="wrapper">.
<div class="wrapper"> ini disebut child.
Jika di urut kebawah, maka <div class="header"> adalah juga child dari <div class="wrapper">.
Apakah <div class="wrapper"> sekarang menjadi parent?
Iya, dia adalah parent dari <div class="header">, tapi tetap merupakan child dari <body>.
Paham, ya?
Belum paham?
Ini saya beri contoh dalam kode lingkup reactJS (JSX):
import React, {Component} from 'react';
// ini contoh class pada react
export default class Susanto extends Component{
state = { makanan: 'roti'}
render(<div className="wrapper"><Rudi properti={this.state.makanan}/> </div>)
}
// ini contoh function dengan arrow ES6
const Rudi = ({ properti }) => {
return ( <div className="header">{ properti.makanan}</div>)
}
React itu sangat berkaitan erat dengan html, dan pemahaman tentang parent-child html tersebut sama dengan di react.
Karena react menggunakan sistem component, maka untuk mengeluarkan kode html tersebut ke browser untuk di lihat user, Anda harus membagi-bagikannya menjadi beberapa bagian.
Tujuannya adalah mempermudah dalam pembuatan website yang dinamis.
Kalau kurang paham, coba di lewati saja dulu.
Untuk props ini sebenarnya tidak begitu rumit, ingat saja ini:
- Props adalah properties / variabel-nilai yang diturunkan
- Props adalah object
- Props di turunkan antar component seperti halnya argumen pada function
- Props hanya bisa diturunkan satu jalur yaitu parent ke child
- Props hanya bisa di baca oleh child sehingga tidak bisa di mengubah props dari component child
Aduh pembahasannya sudah lari kemana-mana.
Mari kembali ke awal topik.
Perbedaan Class dan Function pada ReactJS Setelah React 16.8
Setelah react 16.8, function memiliki semua “kekuatan” dari class.
Salah satu problem yang membuat react “meningkatkan kekuatan” dari function adalah karena beberapa hal:
- Penulisan class lebih panjang dari function
- Penggunaan ulang logika yang rumit di class
- Sebagian component menjadi raksasa dan sulit di bedah, ketika terjadi permasalahan menjadi sulit menyelesaikannya
- Pada titik tertentu, class bisa jadi sangat memusingkan untuk dibaca.
- Wrapper of hell
Wrapper of hell inilah masalah yang bikin jijik kalau menggunakan class terlalu banyak:
Makanya, para core developer dari reactJS membuat function menjadi lebih powerful.
Untuk penggunaan function dalam membuat component, ada dua cara.
Cara pertama yang paling di rekomendasikan:
function Namafungsi(){
return( /*sesuatu disini*/ );
}
Cara kedua:
const Namafungsi = () => {
return ( /* sesuatu di sini */ );
}
Oke, sampai sini dulu. Akan saya lanjut di posting selanjutnya tentang reactjs ini.