Melaksanakan Hook Tersuai useDebounce

Cangkuk useDebounce menerima nilai dan kelewatan dalam milisaat, lalu mengembalikan versi nilai yang dinyahlantun: function useDebounce(value, delay). Nilai debouncedValue yang dikembalikan tertinggal di belakang nilai sebenar dan hanya dikemas kini selepas kelewatan yang ditetapkan berlalu tanpa perubahan lain.

Di dalam cangkuk, isytiharkan pemboleh ubah keadaan: const [debouncedValue, setDebouncedValue] = useState(value). Keadaan ini menyimpan nilai terakhir yang telah ditetapkan. Keadaan ini bermula dengan nilai awal dan hanya dikemas kini selepas pemasa penyahlantunan dicetuskan. Komponen yang membaca debouncedValue akan melihat masukan yang stabil dan selesai.

Logik teras berada dalam useEffect: cipta pemasa dengan setTimeout(() => setDebouncedValue(value), delay) dan simpan ID-nya. Kesan ini dijalankan setiap kali value atau delay berubah. Pemasa dicetuskan delay milisaat selepas perubahan terakhir, lalu mengemas kini keadaan yang dinyahlantun.

Fungsi pembersihan useEffect memanggil clearTimeout(timerId). Apabila value berubah sebelum pemasa dicetuskan, React menjalankan pembersihan untuk membatalkan kemas kini yang masih menunggu. Pemasa baharu kemudiannya dijadualkan. Inilah mekanisme utama yang menjadikan penyahlantunan berfungsi: perubahan pantas terus menetapkan semula pemasa.

Tatasusunan kebergantungan useEffect hendaklah mengandungi [value, delay]. Kesan itu dijalankan semula setiap kali nilai masukan berubah, supaya pemasa baharu dijadualkan, dan setiap kali kelewatan berubah, sekiranya pemanggil melaraskan selang penyahlantunan secara dinamik. Kedua-duanya mesti disertakan untuk mengelakkan masalah penutupan lapuk.

Penggunaannya mudah: const debouncedSearch = useDebounce(searchInput, 300). Kesan useEffect berasingan dengan [debouncedSearch] sebagai kebergantungannya mencetuskan panggilan antara muka pengaturcaraan aplikasi. Keadaan masukan (searchInput) dikemas kini serta-merta supaya masukan kekal responsif; hanya panggilan antara muka pengaturcaraan aplikasi menunggu proses penyahlantunan.

Secara lalai, pelaksanaan standard hanya berjalan pada tepi akhir. Untuk mod "serta-merta" yang memanggil fungsi pada pencetus pertama tetapi menyahlantunkan panggilan seterusnya, anda memerlukan ref untuk menjejak sama ada panggilan telah dibuat dan menetapkannya semula selepas tamat tempoh. Cara ini lebih kompleks tetapi berguna untuk butang hantar.

Jadikan cangkuk generik demi keselamatan jenis: function useDebounce(value: T, delay: number): T. Ini membolehkan TypeScript membuat inferens terhadap jenis debouncedValue daripada jenis value. Parameter generik T disebarkan secara automatik melalui keadaan dalaman dan jenis yang dikembalikan.

Kesilapan yang kerap berlaku ialah terlupa mengembalikan fungsi pembersihan daripada useEffect. Tanpa pembersihan, setiap perubahan nilai mencipta pemasa baharu tetapi tidak pernah membatalkan pemasa lama. Akibatnya, beberapa pemasa dicetuskan dan menyebabkan setDebouncedValue dipanggil berkali-kali dengan nilai lapuk, sekali gus menggagalkan penyahlantunan sepenuhnya.

Pendekatan alternatif ialah menyimpan fungsi penyahlantunan itu sendiri dalam useRef menggunakan lodash. Tidak seperti pendekatan berasaskan keadaan, pendekatan ref menyahlantunkan panggilan balik, iaitu fungsi, dan bukannya nilai. Gunakan cangkuk berasaskan keadaan apabila anda memerlukan nilai terbitan; gunakan pendekatan panggilan balik apabila anda perlu menyahlantunkan pengendali peristiwa.

Sahkan bahawa cangkuk anda berfungsi dengan menambahkan catatan konsol di dalam panggilan balik pemasa dan memerhatikan konsol pelayar semasa menaip dengan pantas. Anda sepatutnya melihat satu catatan bagi setiap peristiwa "berhenti", bukannya satu catatan bagi setiap tekanan kekunci. Bilangan catatan sepatutnya jauh lebih kecil daripada bilangan tekanan kekunci semasa menaip dengan pantas.

Cangkuk useDebounce(value, delay) menyimpan keadaan yang dinyahlantun dan hanya dikemas kini selepas delay milisaat tanpa peristiwa. useEffect-nya menetapkan pemasa dan mengosongkannya semasa pembersihan untuk membatalkan pemasa lapuk. Gunakan nilai yang dinyahlantun sebagai kebergantungan untuk kesan yang mendapatkan data daripada antara muka pengaturcaraan aplikasi. Tambahkan generik TypeScript untuk keselamatan jenis sepenuhnya.