High Order Component (HOC) pada React
HOC adalah teknik lanjutan pada React dengan menggunakan kembali komponen yang sudah ada dengan menambahkan komposisi logika sifat lainnya.
bingung ?? misal gini deh
anggap aja gua punya 2 file Home.jsx & Profile.jsx, file Profile.jsx hanya bisa diakses ketika user memiliki access token, sedangkan Home.jsx tidak perlu access token.
disini kita harus buat validasi pada Profile.jsx jika tidak ada access token maka halaman Profile tidak bisa diakses, dengan cara membuat perintah pengecekan apakah access token tersebut valid pada fungsi `componentDidMount()`.
gimana jadinya kalau kita punya halaman lain selain Profile ?? yaa.. harus bikin di setiap `componentDidMount()`, ini merepotkan, dengan HOC kita tidak perlu menambahkan validasi di tiap `componentDidMount()` karena kita bisa menambahkan komposisi logika ditiap komponen.
gimana cara pakeknya ?? simple aja, gua punya Home.jsx & Profile.jsx dengan code seperti gambar no. 1 & 2.
pada no.1 tidak ada yang spesial yaa.. cuma potongan kode react sederhana yang menampilkan tulisan header. sedangkan no.2 terdapat fungsi `componentDidMount()` yang berfungsi untuk mengamankan halaman tersebut agar hanya bisa diakses bagi user yang memiliki access token.
sekarang perhatikan gambar no.3
code tersebut contoh pengimplementasian dari HOC (High Order Component), isi berkas tersebut memuat logika validasi untuk mengecek apakah user memiliki access token, sama seperti isi dari `componentDidMount()` milik gambar no.2
HOC yang telah kita buat, bisa digunakan untuk halaman lain selain Profile yang memiliki sifat hanya bisa diakses jika memiliki access token contoh penggunan HOC pada Profile terdapat pada gambar no.4
cara mengimport berkas HOC lalu dipanggil sebagai `export default PrivatePage(component)`. jika kita memiliki halaman lain seperti Setting, maka cara penggunaannya sama saja seperti pada gambar no.5
gimana ?? kodingan untuk validasi token tersebut tidak perlu dibuat ulang bukan di tiap komponen ?
Remember.. Don't repeat your self
