Penerapan Praktis: Pencarian, Gulir, Pengubahan Ukuran

Dalam komponen pencarian langsung, pertahankan dua variabel status terpisah: inputValue untuk input mentah (diperbarui pada setiap penekanan tombol, sehingga kolom input tetap responsif) dan debouncedQuery dari useDebounce(inputValue, 300) (diperbarui 300 ms setelah pengetikan berhenti, sehingga memicu panggilan API). Pemisahan ini memberikan umpan balik visual seketika tanpa permintaan berlebihan.

Tampilkan indikator pemuatan segera setelah pengguna mulai mengetik, bukan hanya saat panggilan API dimulai. Tetapkan isLoading: true kapan pun inputValue !== debouncedQuery — keduanya tidak sinkron selama penundaan masih menunggu. Setelah kueri stabil dan pengambilan selesai, atur kembali ke false. Pengguna melihat indikator pemuatan yang responsif sepanjang proses.

Efek paralaks atau bilah kemajuan membaca diperbarui berdasarkan posisi gulir. Batasi penangan gulir hingga maksimum 60 fps menggunakan jeda 16 ms: const throttledScrollY = useThrottle(scrollY, 16). Antarmuka diperbarui dengan mulus tanpa biaya komputasi ulang posisi pada setiap piksel guliran.

Mendengarkan pengubahan ukuran jendela untuk menghitung ulang tata letak sebaiknya menggunakan penundaan, bukan pembatasan laju. Perhitungan tata letak hanya perlu dijalankan sekali setelah pengguna selesai mengubah ukuran. Gunakan penundaan 200 ms pada dimensi jendela. Selama pengguna menyeret untuk mengubah ukuran, antarmuka dapat menampilkan status sederhana; tata letak yang dihitung ulang muncul saat pengubahan ukuran berhenti.

Saat debouncedQuery berubah, buat AbortController baru dan teruskan signal-nya ke fetch(url, { signal }). Kembalikan fungsi pembersihan yang memanggil controller.abort(). Ini membatalkan permintaan yang sedang berlangsung dari kueri sebelumnya ketika kueri tertunda baru tiba, sehingga mencegah kondisi balapan saat respons lama yang lambat menimpa respons baru yang lebih cepat.

Tanpa AbortController, jika pengguna mengetik "re", menunggu, lalu mengetik "react", kueri kedua mungkin selesai sebelum kueri pertama (karena penyimpanan tembolok). Hasil pencarian akan menampilkan hasil React sebentar, lalu ditimpa oleh hasil usang untuk "re". AbortController mencegah hal ini dengan membatalkan permintaan sebelumnya sepenuhnya.

Menu tarik-turun menggabungkan penundaan untuk panggilan API dan status langsung untuk tampilan input. inputValue mengontrol apa yang muncul di kolom teks. useDebounce(inputValue, 250) mengontrol kapan pengambilan saran dijalankan. Daftar saran ditampilkan dari status hasil yang diambil, yang terpisah dari kedua status input.

Validasi formulir asinkron, seperti memeriksa apakah email sudah ada, sebaiknya ditunda agar server tidak dibebani pada setiap penekanan tombol. Gunakan penundaan 400 ms pada nilai bidang dan jalankan permintaan validasi dalam useEffect yang bergantung pada nilai tertunda. Tampilkan indikator pemuatan di bidang selama validasi berlangsung.

Penundaan sangat cocok untuk menyimpan konten formulir secara otomatis saat pengguna mengetik. Tetapkan penundaan 1000 ms pada objek nilai formulir. Saat nilai tertunda berubah, picu penyimpanan ke localStorage atau titik akhir API. Pengguna melihat indikator "Menyimpan..." selama penundaan masih berlangsung dan "Tersimpan" setelah permintaan selesai.

Nilai jeda merupakan keputusan pengalaman pengguna. Untuk pencarian: 200–300 ms menyeimbangkan responsivitas dengan pengurangan jumlah permintaan. Untuk pengubahan ukuran: 150–200 ms dapat diterima karena pengguna mengharapkan tata letak stabil setelah pengubahan ukuran. Untuk penyimpanan otomatis: 1000 ms memberi pengguna waktu untuk mengetik satu kalimat sebelum menyimpan. Sesuaikan berdasarkan kecepatan interaksi yang diharapkan.

Aplikasi nyata sering memerlukan beberapa pengoptimalan secara bersamaan. Editor dokumen dapat menunda penyimpanan otomatis (1 dtk), membatasi laju penghitungan jumlah kata (500 ms), dan menggunakan IntersectionObserver untuk analitik. Teknik-teknik ini berpadu dengan baik karena masing-masing bekerja secara mandiri menggunakan pengatur waktu dan cakupannya sendiri.

Mengapa Anda sebaiknya menggunakan AbortController bersama kueri pencarian yang ditunda?

Gunakan useDebounce untuk input pencarian, penangan pengubahan ukuran, dan penyimpanan otomatis formulir. Gunakan useThrottle untuk guliran dan gerakan tetikus. Selalu gabungkan panggilan API yang ditunda dengan AbortController untuk mencegah kondisi balapan. Tampilkan status pemuatan kapan pun inputValue !== debouncedQuery agar antarmuka pengguna tetap responsif dan informatif.