Mengapa Debounce dan Throttle Penting dalam UI

Peristiwa DOM tertentu terjadi pada frekuensi yang sangat tinggi. Peristiwa keypress terjadi pada setiap penekanan tombol. Peristiwa scroll terjadi puluhan kali per detik saat menggulir. Peristiwa resize terjadi terus-menerus saat pengguna menyeret batas jendela. Memproses setiap peristiwa satu per satu dapat membebani browser dan server Anda.

Jika penangan penekanan tombol Anda melakukan panggilan API pada setiap penekanan tombol, pengguna yang mengetik "React hooks" (11 karakter) akan memicu 11 permintaan jaringan, yang sebagian besar merupakan kueri yang belum lengkap. Demikian pula, memperbarui animasi paralaks pada setiap piksel pengguliran dapat memicu ratusan perenderan ulang React per detik. Hal ini membuang CPU, jaringan, dan daya baterai.

Penundaan menunda eksekusi hingga peristiwa berhenti terjadi selama jangka waktu tertentu. Jika pengguna masih mengetik, pengatur waktu diatur ulang pada setiap penekanan tombol. Hanya setelah tidak ada aktivitas selama N milidetik, penangan akhirnya dijalankan sekali. Penundaan menjawab pertanyaan: "jalankan ini setelah pengguna selesai melakukan sesuatu."

Pembatasan laju membatasi eksekusi hingga paling banyak satu kali per interval waktu, terlepas dari jumlah peristiwa yang terjadi. Jika pengguna menggulir dengan cepat, pembatasan selama 100 milidetik memastikan penangan Anda dijalankan tidak lebih dari 10 kali per detik. Pembatasan laju menjawab pertanyaan: "jalankan ini secara berkala, tetapi jangan lebih sering daripada setiap N milidetik."

Penundaan merupakan pilihan tepat ketika Anda hanya memerlukan nilai akhir setelah pengguna berhenti. Contoh umum: masukan pencarian (kirim permintaan API setelah jeda mengetik), penangan pengubahan ukuran jendela (hitung ulang tata letak setelah pengubahan ukuran selesai), dan validasi bidang formulir yang memeriksa server (tunggu masukan lengkap sebelum memvalidasi).

Pembatasan laju merupakan pilihan tepat ketika Anda menginginkan pembaruan rutin selama aktivitas berkelanjutan. Contoh umum: penangan posisi pengguliran (perbarui bilah kemajuan membaca atau tajuk tetap paling banyak 30 frame per detik), pelacakan gerakan tetikus (catat posisi kursor untuk analitik), dan penangan peristiwa seret (perbarui posisi elemen yang dapat diseret dengan lancar tanpa membanjiri sistem).

Menulis penundaan atau pembatasan laju dari awal tanpa pemahaman menyeluruh dapat menyebabkan bug seperti melewatkan peristiwa terakhir (tepi akhir), memicu pada tepi yang salah, atau tidak membersihkan pengatur waktu saat komponen dilepas. Umumnya, lebih baik menggunakan implementasi yang telah teruji dari pustaka seperti lodash, yang menangani semua kasus tepi dengan benar.

Lodash menyediakan _.debounce(fn, wait) dan _.throttle(fn, wait) dengan opsi untuk perilaku tepi awal dan akhir. Fungsi yang dikembalikan memiliki metode .cancel() untuk membatalkan pemanggilan yang tertunda dan metode .flush() untuk menjalankannya segera. Fungsi-fungsi ini sebaiknya dibungkus dalam useRef di React agar tidak dibuat ulang saat perenderan ulang.

Bahkan 50 perenderan ulang React tambahan per detik akibat penangan pengguliran tanpa pembatasan laju dapat menghabiskan CPU secara signifikan, terutama pada perangkat seluler kelas bawah. Anggaran bingkai 16 milidetik (60 frame per detik) berarti setiap perenderan ulang harus selesai dalam waktu kurang dari 16 milidetik agar tidak terjadi bingkai yang terlewat. Penundaan dan pembatasan laju merupakan garis pertahanan pertama Anda terhadap masalah laju bingkai.

Tidak semua penangan berfrekuensi tinggi memerlukan penundaan. Jika penangan peristiwa hanya membaca nilai tanpa memperbarui status atau memanggil API—misalnya, mencatat posisi tetikus terakhir dalam referensi—tidak diperlukan penundaan. Tunda atau batasi laju hanya pada penangan yang memicu operasi mahal: pembaruan status, panggilan API, atau pengukuran DOM.

Saat komponen dilepas, panggilan tertunda apa pun harus dibatalkan untuk mencegah pembaruan status setelah pelepasan. Jika Anda menggunakan useRef untuk menyimpan fungsi yang ditunda, panggil debouncedFn.cancel() dalam pembersihan useEffect. Fungsi yang ditunda dari Lodash menyediakan metode ini khusus untuk tujuan tersebut.

Teknik mana yang harus Anda gunakan untuk memicu panggilan API ketika pengguna berhenti mengetik di bidang pencarian?

Peristiwa berfrekuensi tinggi seperti penekanan tombol, pengguliran, dan pengubahan ukuran dapat menyebabkan masalah kinerja jika penangan dijalankan pada setiap peristiwa. Penundaan menunggu hingga aktivitas berhenti dan paling sesuai untuk masukan pencarian serta penangan pengubahan ukuran. Pembatasan laju membatasi frekuensi dan paling sesuai untuk pengguliran serta penyeretan. Gunakan implementasi lodash yang disimpan dalam referensi, dan selalu batalkan saat komponen dilepas.