Mengimplementasikan Hook Kustom useDebounce

Pengait useDebounce menerima sebuah nilai dan jeda dalam milidetik, lalu mengembalikan versi tertunda dari nilai tersebut: function useDebounce(value, delay). Nilai debouncedValue yang dikembalikan tertinggal dari nilai sebenarnya dan hanya diperbarui setelah jeda yang ditentukan berlalu tanpa perubahan lain.

Di dalam pengait, deklarasikan variabel status: const [debouncedValue, setDebouncedValue] = useState(value). Status ini menyimpan nilai terakhir yang ditetapkan. Nilai tersebut dimulai sama dengan nilai awal dan hanya diperbarui setelah pengatur waktu penundaan terpicu. Komponen yang membaca debouncedValue akan melihat masukan yang stabil dan sudah ditetapkan.

Logika inti berada dalam useEffect: buat pengatur waktu dengan setTimeout(() => setDebouncedValue(value), delay) dan simpan ID-nya. Efek dijalankan setiap kali value atau delay berubah. Pengatur waktu terpicu delay milidetik setelah perubahan terakhir dan memperbarui status yang ditunda.

Fungsi pembersihan useEffect memanggil clearTimeout(timerId). Ketika value berubah sebelum pengatur waktu terpicu, React menjalankan pembersihan untuk membatalkan pembaruan yang tertunda. Pengatur waktu baru kemudian dijadwalkan. Inilah mekanisme utama yang membuat penundaan berfungsi: perubahan cepat terus mengatur ulang pengatur waktu.

Larik dependensi useEffect harus berisi [value, delay]. Efek dijalankan ulang setiap kali nilai masukan berubah, sehingga pengatur waktu baru dijadwalkan, dan setiap kali jeda berubah, jika pemanggil menyesuaikan interval penundaan secara dinamis. Keduanya wajib disertakan untuk mencegah masalah penutupan yang menyimpan nilai lama.

Penggunaannya sederhana: const debouncedSearch = useDebounce(searchInput, 300). useEffect terpisah dengan [debouncedSearch] sebagai dependensinya memicu panggilan API. Status masukan (searchInput) diperbarui segera sehingga bidang masukan tetap responsif; hanya panggilan API yang menunggu penundaan.

Secara bawaan, implementasi standar hanya berjalan di tepi akhir. Untuk mode "segera" yang memanggil fungsi pada pemicu pertama tetapi menunda panggilan berikutnya, Anda memerlukan referensi untuk melacak apakah panggilan sudah dilakukan dan mengaturnya ulang setelah batas waktu. Cara ini lebih rumit, tetapi berguna untuk tombol kirim.

Jadikan pengait generik untuk keamanan tipe: function useDebounce(value: T, delay: number): T. Dengan begitu, TypeScript dapat menyimpulkan tipe debouncedValue dari tipe value. Parameter generik T secara otomatis diteruskan melalui status internal dan tipe hasil.

Kesalahan yang sering terjadi adalah lupa mengembalikan fungsi pembersihan dari useEffect. Tanpa pembersihan, setiap perubahan nilai membuat pengatur waktu baru tetapi tidak pernah membatalkan pengatur waktu lama. Akibatnya, beberapa pengatur waktu terpicu dan menyebabkan setDebouncedValue dipanggil beberapa kali dengan nilai lama, sehingga penundaan sepenuhnya tidak berfungsi.

Alternatifnya adalah menyimpan fungsi penundaan itu sendiri dalam useRef menggunakan lodash. Berbeda dari pendekatan berbasis status, pendekatan berbasis referensi menunda panggilan balik (fungsi), bukan nilai. Gunakan pengait berbasis status ketika Anda memerlukan nilai turunan; gunakan pendekatan panggilan balik ketika Anda perlu menunda penangan peristiwa.

Verifikasikan bahwa pengait Anda berfungsi dengan menambahkan pencatatan konsol di dalam panggilan balik pengatur waktu dan mengamati konsol peramban saat mengetik dengan cepat. Anda seharusnya melihat satu catatan untuk setiap peristiwa "berhenti", bukan satu catatan untuk setiap penekanan tombol. Jumlah catatan seharusnya jauh lebih sedikit daripada jumlah penekanan tombol saat mengetik cepat.

Mengapa useEffect dalam useDebounce perlu mengembalikan fungsi pembersihan yang memanggil clearTimeout?

Pengait useDebounce(value, delay) menyimpan status yang ditunda dan hanya memperbaruinya setelah delay milidetik tanpa aktivitas. useEffect-nya menetapkan batas waktu dan menghapusnya saat pembersihan untuk membatalkan pengatur waktu lama. Gunakan nilai yang ditunda sebagai dependensi untuk efek pengambilan data melalui API. Tambahkan tipe generik TypeScript untuk keamanan tipe penuh.