React Hooks: useCallback dan useMemo

1. useCallback()

useCallback hooks digunakan untuk mencegah render child komponen yang tidak di perlukan.

Lebih jelasnya coba perhatikan contoh berikut!

Contoh 1:

 

Maksud dari kode di atas, adalah:

- Method GetCounterData menjadi parameter di child component, sehingga saat parent component dirender maka child component juga akan dirender jika tidak menggunakan useCallback(). Termasuk saat kita klik button Show / Hide Data, padahal component button tersebut tidak ada hubungannya dengan method GetCounterData.

- Untuk mengatasi masalah pada point di atas, solusinya adalah menggunakan useCallback() sehingga child component akan dirender hanya jika method GetCounterData di build ulang (dieksekusi). Yang perlu diperhatikan adalah dependencynya. Jika dependency di dalam method GetCounterData adalah array kosong, maka saat button Add Counter di klik, tidak akan menjalankan kode return di dalamnya (hanya mengubah nilai state counternya saja). 

Jadi, intinya jika kita menggunakan variabel dari luar didalam method callbacknya, jangan lupa tambahkan sebagai dependency. Pada contoh di atas, kita menggunakan variabel dari luar yaitu counter, sehingga kita perlu menambahkan counter sebagai dependencynya.

Contoh 2:

 

Maksud dari kode di atas adalah:

- Sama seperti sebelumnya, jika method GetRandomData yang dijadikan parameter child component tidak menggunakan useCallback() maka child component akan dirender ulang setiap kali parent component-nya dirender.

- Jika menggunakan useCallback(), ketika kita klik button Show / Hide Data, maka child component tidak akan dirender ulang (dirender satu kali pada saat pertama parent component di render), karena method GetRandomData tidak menggunakan variabel dari luar seperti pada contoh 1.