Begini Cara Memahami Fungsi useCallback Hooks pada React JS/Next JS dengan Menggunakan Visualisasi yang Sederhana
Tags: javascript, react, nextjs
Published: 2024-06-02 14:45:54


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jg5px5tdspewtfmquumh.png)

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](https://react.dev/reference/react/useCallback). Karena saya lebih suka menjelaskan berdasarkan praktik bukan teori. Sebelum lanjut lebih dalam pembahasan useCallback Hooks. Teman-teman bisa lihat gambar di bawah ini :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpmy79muvrcowga76v6q.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6pok1wiija3msmltexd.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gjebrwv2kcqyd2ya27c.png)

Source Code Button Hitung Luas:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59ox6evuxu6w88j6ns8c.png)

Source Code Button Hitung Keliling:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibmhi4tyskcklnaqhhai.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzkoxgzq0v5rqa5earwi.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67pttds13v335mqxsb18.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbyargl927pitxy87dcg.png)

Lalu, kita akan coba klik button Hitung Luas.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxeict9ddp58krp0sveo.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn432ysbfe0rge0wtfw5.png)

Kok bisa? ya bisa, karena component Hitung Keliling menggunakan _useCallback Hooks_ dan menggunakan [memo ](https://react.dev/reference/react/memo) untuk melakukan skip render apabila tidak ada perubahan pada komponennya.

Penggunaan useCallback pada function hitung keliling:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8frek61q3xyaahbr0rn.png)

Penggunaan memo pada component Button Keliling Persegi: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlutog179mubyfbbils4.png)

Kemudian, ketika kita melakukan klik pada button Hitung Keliling.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odplr37yya5o8botjq3k.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yu9zplk3mqy7nxqdle3h.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hhf5idkc1syd2yf8ch1.png)

Menggunakan memo pada komponen button luas persegi:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ix65wbkzxx89646uiru.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hrsvbo9a4rf585jmxk9.png)

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

Hasil render setelah melakukan action terhadap button hitung luas:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqqch3spf4j82cbdtvjh.png)

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

Melakukan action terhadap button Hitung Keliling:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqispahigk5xasy1w5e3.png)

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

Hasil render setelah melakukan action terhadap button Hitung Keliling:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxdofydkb4s24f3a84ok.png)

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.