Anda pasti sudah sering mendengar bahwa kita harus memoize fungsi callback menggunakan useCallback() untuk mencegah rendering ulang komponen yang tidak berguna.

Tapi apa sebenarnya useCallback() . Pernahkah Anda memikirkannya?

Biarkan saya membantu Anda memahami apa itu dan di mana menggunakannya dengan benar.

Pertama-tama mari kita pahami pemeriksaan persamaan fungsi

Sebelum melihat bagaimana kita menggunakannya, mari kita lihat apa yang dipecahkannya. Mari kita tulis fungsi sederhana yang mengembalikan fungsi:

mul1 dan mul2 adalah fungsi perkalian dua bilangan. Mereka telah dibuat oleh fungsi multiply .

Fungsi dalam JavaScript adalah objek biasa. Fungsi mul1 dan mul2 berbagi kode yang sama tetapi mereka adalah objek fungsi yang berbeda. Membandingkan mereka mengevaluasi ke false .

Begitulah cara kerja objek JavaScript. Sebuah objek (termasuk objek fungsi) sama dengan dirinya sendiri.

Sekarang Tujuan useCallback()

React.useCallback() pada dasarnya memecahkan pemeriksaan persamaan fungsi yang kita lihat di atas. Objek fungsi yang berbeda berbagi kode yang sama sering dibuat di dalam komponen React:

handleClick (fungsi sebaris) adalah objek fungsi yang berbeda pada setiap rendering CustomComponent .

Dan tidak ada salahnya memiliki fungsi yang dideklarasikan sejalan dengan React Components. Itu tidak akan berdampak buruk pada kinerja.

Tetapi dalam beberapa kasus, Anda perlu mempertahankan instance fungsi tunggal di antara rendering:

1. Seperti ketika fungsi memiliki beberapa keadaan internal, misalnya ketika fungsi di-debounce/throtttle

2. Komponen fungsional yang dibungkus di dalam React.memo()menerima prop objek fungsi.

Jika komponen turunan yang menerima panggilan balik bergantung pada pemeriksaan kesetaraan referensial (misalnya: React.memo() atau shouldComponentUpdate() ) untuk mencegah perenderan ulang yang tidak perlu saat propsnya berubah, maka penting agar setiap props callback tidak berubah antara membuat.

Oleh karena itu dalam komponen induk, kita dapat membungkus prop panggilan balik di useCallback() dan menjamin bahwa itu meneruskan objek fungsi yang sama ke dalam komponen turunan yang dioptimalkan.

3. Ketika objek fungsi adalah ketergantungan pada kait lain, mis useEffect(..., [callback])

Dalam contoh di atas, jika myFunction melakukan sesuatu yang menyebabkan MyComponent dibangun kembali (misalnya jika melakukan sesuatu yang mengubah props atau status) akan membawa Anda ke status loop tak terbatas.

Untuk mencegah hal ini, kami membungkus useCallback() di sekitar suatu fungsi dan mendefinisikan dependensinya untuk memastikan bahwa fungsi tersebut hanya dibuat ulang jika dependensinya berubah. Karenanya fungsinya tidak dideklarasikan ulang pada setiap siklus render lagi

Jadi kasus penggunaan di atas adalah ketika, useCallback hook sangat membantu: dengan nilai ketergantungan yang sama, hook mengembalikan instance fungsi yang sama antara rendering dan meningkatkan kinerja.

Semoga ini membantu Anda dalam memahami sebenarnya useCallback()! 😊

Terimakasih telah membaca artikel ini. Jika Anda menikmatinya, silakan klik tombol untuk membantu orang lain menemukannya.