Pernah dengar useCallback pada React JS? Jika teman-teman pernah dengar berarti teman-teman sudah cukup jauh explore framework javascript yang satu ini. Tapi, pernah dengar aja belum cukup. Apakah teman-teman sudah tau bagaimana useCallback itu bekerja? Kalau sudah tau, yaudah jangan dilanjutin. Selesaikan kerjaan yang lain aja, kalau yang udah kerja. Tapi kalau yang belum kerja ya nonton Youtube aja lebih enak, jangan belajar, buang-buang waktu, nanti paling cuma nganggur aja sampai tua.

Saya akan coba kasih insight dengan praktikum kode ya, untuk teori bisa dilihat pada link disini. Karena saya lebih suka menjelaskan berdasarkan praktik bukan teori. Sebelum lanjut lebih dalam pembahasan useCallback Hooks. Teman-teman bisa lihat gambar di bawah ini :

Visualisasi diatas merupakan gambaran lifecycle dalam proses render komponen yang ada pada React JS. Jadi, sebelum tampil di halaman web dan ketika ada perubahan yang dilakukan oleh state maka ada 4 proses yang dilakukan oleh React JS. Nah, 4 proses itu tentunya tidak ada yang salah, tetapi kesalahan itu akan terjadi ketika aplikasi yang kita kembangkan itu terus menerus melakukan 4 proses tersebut tanpa adanya perubahan state pada komponen kita. Kalau teman-teman masih bingung dengan “perubahan state pada komponen” yang saya maksud sebelumnya, maka teman-teman cukup tepat karena sudah bingung. Oke, saya akan coba visualisasikan ke dalam bentuk kode program ya, supaya tidak bingung.

Kali ini, kita mempunyai tampilan pada web browser kurang lebih seperti pada gambar diatas. Border merah merupakan parent dan border kuning merupakan child. Untuk source code bisa temen-temen lihat pada gambar dibawah ini :

Source Code Halaman Home:

Source Code Button Hitung Luas:

Source Code Button Hitung Keliling:

Kemudian, ketika kita baru pertama kali buka pada browser maka React JS akan secara normal melakukan 3 proses render.

Lalu ketika kita coba lakukan perubahan state sisi yang mana state sisi ini digunakan pada child component Hitung Luas dan Hitung Keliling.

Maka, pada console browser akan melakukan render 3 kali lagi. Karena, state sisi digunakan pada 2 child. Sehingga, ini masih normal.

Lalu, kita akan coba klik button Hitung Luas.

Maka, komponen Hitung Keliling tidak dirender. Hanya melakukan render Parent adn Luas Persegi.

Kok bisa? ya bisa, karena component Hitung Keliling menggunakan useCallback Hooks dan menggunakan memo untuk melakukan skip render apabila tidak ada perubahan pada komponennya.

Penggunaan useCallback pada function hitung keliling:

Penggunaan memo pada component Button Keliling Persegi:

Kemudian, ketika kita melakukan klik pada button Hitung Keliling.

Maka, akan ada 3 kali render yang mana Render Keliling Persegi akan dieksekusi karena ada perubahan pada state keliling.

Sampai sini, apakah ada yang salah? Ada dong. Ketika kita melakukan klik pada button Hitung Keliling kenapa kok component Hitung Luas dirender juga? kan ngga ada perubahan pada state? Nah itu problemnya, maka dari itu kita harus menggunakan useCallback dan memo untuk mengatasi hal ini. Bayangkan kalau component kita udah banyak, lalu kita cuma melakukan perubahan pada 1 component saja, tetapi component lain juga ikut dirender oleh React padahal tidak ada perubahan pada component lainnya. Otomatis akan menghabiskan resource hanya untuk masalah yang seharusnya tidak terjadi.

Jadi, sekarang kita akan coba implementasikan useCallback dan memo pada component Hitung Luas.

Menggunakan useCallback pada function hitung luas:

Menggunakan memo pada komponen button luas persegi:

Lalu, kita bisa lihat perbedaanya ketika sudah menggunakan useCallback dan memo pada component Hitung Luas. Ketika kita melakukan klik pada button Hitung Luas.

Melakukan action pada komponen hitung luas:

Maka, React hanya akan melakukan render pada komponen parent dan hitung luas.

Hasil render setelah melakukan action terhadap button hitung luas:

Begitu pula, ketika kita melakukan klik pada button Hitung Keliling.

Melakukan action terhadap button Hitung Keliling:

Maka, react js akan melakukan render hanya pada komponen parent dan Hitung Keliling.

Hasil render setelah melakukan action terhadap button Hitung Keliling:

Dengan demikian kita bisa meminimalisir terjadinya proses render yang seharusnya tidak perlu dilakukan oleh React dikarenakan tidak ada perubahan pada komponennya khususnya pada state-nya.

Sampai sini apakah sudah sedikit memahami cara kerja dari useCallback pada React JS? Saya berharap teman-teman bisa memahami meskipun penjelasan yang saya sampaikan malah bikin yang awalnya nggak tau malah jadi nggak mau tau dan akhirnya temen-temen males belajar React.

Oke, mungkin cukup sekian. Semoga bisa bertemu di lain kesempatan pada artikel yang berbeda.