Yuk kenalan sama React.memo
React merilis beberapa fitur baru pada versi 16.6. Salah satunya adalah memo. sebuah Higher Order Component (HOC) yang menyerupai PureComponent / shouldComponentUpdate, namun untuk function component.
Gunanya buat apa?
PureComponent memberikan pengoptimalan terhadap performa React, dimana component hanya akan melakukan render ulang jika props atau state-nya berubah. Namun PureComponent hanya bekerja untuk class component.
Kelebihan function component dibandingkan class component adalah initial render yang sedikit lebih baik dan ukuran yang lebih kecil, yang mana membantu mengurangi bundle size.
Dengan melakukan memoization terhadap function component tentunya akan memberikan performa lebih, tidak hanya saat initial render namun juga saat melakukan pembaruan berpotensi lebih cepat.
Bener ngaruh ke performa? Yuk kita cek!
Pertama-tama, kita akan membuat parent component, dengan tag <Parent> yang akan melakukan perubahan state setiap detik, yang artinya <Parent> akan render ulang setiap perubahan state. Kalian bisa lihat percobaan ini di codesandbox.
Percobaan pertama, kita akan buat child component dengan tag <Child> yang ditulis dengan function component tanpa memo, seperti berikut:
Kita akan melihat hasilnya bahwa <Child> akan selalu render ulang apabila <Parent> melakukan render ulang, meskipun <Child> tidak mengalami perubahan, dalam case diatas <Child> hanya memiliki props yang ditulis dengan hardcode, yakni nama="Ferguso". Mengapa kita perlu render ulang suatu component ketika props tetap sama dan output-nya sama persis.
“Oh, tidak! Ferguso!”
Kita sudah melihat hasil dari percobaan pertama, function component tanpa memo. Selanjutnya, kita buat percobaan kedua dengan memakai React.memo pada <Child>, seperti berikut:
Dan… hasilnya…
Kita lihat bahwa <Child> tidak akan render ulang jika <Parent> melakukan render ulang, dikarenakan <Child> tidak mengalami perubahan. Inilah memoization! 👏.
Tips!
Secara default, React.memo hanya akan membandingkan objek dalam props. Jika kamu ingin mengontrol perbandingan, kamu juga dapat menambahkan function perbandingan sebagai argument kedua.
function MyComponent(props) {
/* render using props */
}function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}export default React.memo(MyComponent, areEqual);
Apabila suka dengan tulisan ini, jangan lupa kasih 👏 yang banyak dan share di social media kalian biar makin banyak yang terbantu. Jika ada kesalahan atau perihal apapun, silahkan isi di kolom komentar ya. Terimakasih sudah membaca tulisan ini.
