Mengimplementasikan Hook Kustom useThrottle

Penundaan cukup mengatur ulang pengatur waktu pada setiap peristiwa. Pembatasan laju harus secara aktif melacak kapan eksekusi terakhir terjadi dan memutuskan apakah waktu yang cukup telah berlalu untuk eksekusi berikutnya. Hal ini memerlukan penyimpanan cap waktu di antara perenderan, sehingga implementasinya sedikit lebih rumit daripada penundaan.

Cap waktu eksekusi terakhir harus dipertahankan di antara perenderan tanpa memicu perenderan ulang, sehingga useRef merupakan alat yang tepat. Simpan cap waktu sebagai const lastRunTime = useRef(Date.now()). Berbeda dari status, memperbarui referensi tidak menyebabkan perenderan ulang, sehingga logika pembatasan laju berjalan secara efisien tanpa siklus tambahan.

Pengait useThrottle(value, delay) mengembalikan versi nilai masukan yang dibatasi lajunya. Kontraknya mirip dengan useDebounce: menerima nilai apa pun dan jeda dalam milidetik, lalu mengembalikan nilai yang dibatasi lajunya. Komponen menggunakannya dengan cara yang sama, sehingga pengait ini menjadi alternatif pengganti langsung untuk perilaku waktu yang berbeda.

Pembatas laju pada ujung akhir memperbarui nilai pada akhir setiap selang waktu. Saat nilai baru tiba, jadwalkan setTimeout untuk sisa waktu selang: delay - (Date.now() - lastRunTime.current). Saat pewaktu berjalan, perbarui status dan catat lastRunTime yang baru. Batalkan pewaktu sebelumnya dalam pembersihan.

Pembatas laju pada ujung awal menerapkan nilai pertama segera dan mengabaikan nilai berikutnya hingga selang waktu berakhir. Periksa: jika Date.now() - lastRunTime.current >= delay, perbarui status dan catat waktunya. Jika tidak, lewati pembaruan. Ini memberikan umpan balik seketika pada tindakan pertama, diikuti masa jeda.

Pengalaman pengguna terbaik sering menggabungkan keduanya: merespons segera peristiwa pertama (ujung awal), lalu memastikan status akhir juga diterapkan setelah selang waktu (ujung akhir). Dengan begitu, pengguna melihat respons awal yang cepat dan nilai akhir selalu diterapkan setelah gerakan berhenti, sehingga mencegah status akhir yang usang.

Simpan ID pewaktu yang tertunda di dalam useRef: const timeoutRef = useRef(null). Sebelum menjadwalkan pewaktu baru, panggil clearTimeout(timeoutRef.current) untuk membatalkan pewaktu yang sudah ada. Ini mencegah beberapa pewaktu yang saling tumpang tindih, yang akan menyebabkan beberapa pembaruan dalam satu selang pembatasan laju.

Pembersihan useEffect harus memanggil clearTimeout(timeoutRef.current) untuk membatalkan pembaruan ujung akhir yang tertunda saat komponen dilepas. Tanpa ini, pewaktu tertunda berjalan setelah komponen dilepas, berusaha mengatur status pada komponen yang sudah dilepas dan berpotensi menyebabkan peringatan React.

Alih-alih kait berbasis nilai, Anda dapat membuat kait pembatas laju berbasis useCallback: useThrottledCallback(fn, delay) mengembalikan versi fungsi yang dibatasi lajunya. Ini lebih fleksibel ketika operasi yang ingin Anda batasi adalah pemanggilan fungsi, seperti pelacak analitik, bukan nilai reaktif.

Dalam pengujian Jest, gunakan jest.useFakeTimers() untuk mengontrol waktu. Siapkan pembatas laju dengan penundaan 1000 ms, jalankan 10 perubahan nilai secara cepat, lalu majukan waktu palsu 500 ms dan periksa bahwa hanya 1 atau 2 pembaruan yang terjadi. Majukan lagi 500 ms dan verifikasi bahwa pembaruan ujung akhir berjalan. Ini memvalidasi perilaku pembatas laju secara deterministik.

React memproses pembaruan status secara berkelompok selama perenderan. Pembatas laju yang bekerja pada pembaruan status berfungsi baik dalam model ini. Namun, perhatikan bahwa dalam Mode Konkuren React 18, perenderan dapat disela. Logika pembatas laju itu sendiri, yang berdasarkan waktu nyata menurut jam dinding melalui Date.now(), tidak terpengaruh oleh penjadwalan React.

Pada ujung mana pembatas laju "ujung akhir" dijalankan?

Pembatasan laju memerlukan pelacakan waktu eksekusi terakhir dengan useRef. Kait dapat menerapkan ujung awal (segera), ujung akhir (ditunda), atau keduanya. Selalu simpan ID pewaktu dalam referensi dan batalkan dalam pembersihan. Untuk kasus penggunaan berbasis fungsi, pilih pola useThrottledCallback. Gunakan pengujian dengan pewaktu palsu agar andal.