Saran Asinkron dengan Debounce

Alih-alih memfilter larik lokal, panggil titik akhir API yang mengembalikan saran yang cocok berdasarkan kueri. Panggilan API ditempatkan dalam useEffect yang bergantung pada nilai masukan yang telah diberi jeda. Dengan demikian, tanggung jawab pemfilteran dialihkan ke server sehingga pencocokan samar, pemeringkatan, dan saran dari kumpulan data yang jauh lebih besar dapat digunakan.

Tambahkan dua variabel status baru ke pelengkapan otomatis: isLoading (nilai benar/salah) untuk menampilkan indikator pemuatan selama pengambilan data berlangsung, dan error (teks atau null) untuk menampilkan pesan kesalahan saat pengambilan data gagal. Keduanya memberi pengguna informasi tentang operasi asinkron, alih-alih membuat mereka bertanya-tanya mengapa saran tidak muncul.

Dalam useEffect pengambilan data, tetapkan setIsLoading(true) dan setError(null) di awal, lalu jalankan fetch(url), uraikan JSON, panggil setSuggestions(data), dan terakhir tetapkan setIsLoading(false) dalam blok finalisasi atau setelah jalur keberhasilan dan kesalahan selesai. Larik dependensi efek hanya berisi debouncedInputValue.

Buat AbortController baru di bagian atas efek dan teruskan controller.signal ke opsi pengambilan data. Dalam fungsi pembersihan, panggil controller.abort(). Saat pengguna mengetik dan nilai yang telah diberi jeda berubah, pengambilan data sebelumnya dibatalkan sebelum pengambilan data baru dimulai sehingga hasil lama tidak tiba dalam urutan yang salah.

Saat pengambilan data dibatalkan, pengambilan tersebut ditolak dengan DOMException bernama AbortError. Dalam blok penangkapan kesalahan, periksa if (err.name === 'AbortError') return; untuk mengabaikan pengambilan data yang dibatalkan secara diam-diam. Tangani hanya kesalahan jaringan atau kesalahan API yang sebenarnya dan perlu ditampilkan kepada pengguna.

Tetapkan isLoading ke true sebelum pengambilan data dan ke false setelah pengambilan tersebut berhasil atau gagal. Gunakan blok finalisasi untuk memastikan status selalu diatur ulang: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Tanpa blok finalisasi, kesalahan pengambilan data akan membuat indikator pemuatan terus berjalan selamanya.

Saat isLoading bernilai true dan masukan berisi teks, tampilkan menu tarik-turun dengan indikator pemuatan di tengah, bukan daftar saran. Dengan begitu, pengguna mengetahui bahwa hasil sedang dimuat. Setelah pemuatan selesai dan saran telah tiba, ganti indikator pemuatan dengan item saran yang sebenarnya.

Saat error bukan null, tampilkan menu tarik-turun dengan pesan kesalahan, bukan saran. Pesan seperti "Saran tidak dapat dimuat. Silakan coba lagi." lebih ramah daripada teks kesalahan mentah. Anda juga dapat menambahkan tombol coba lagi yang memicu ulang pengambilan data secara manual.

Hindari pengambilan data untuk teks kosong atau kueri yang sangat pendek karena dapat menghasilkan terlalu banyak hasil yang tidak relevan. Tambahkan pemeriksaan di awal efek: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Dengan begitu, panggilan API yang tidak perlu berkurang dan daftar hasil yang terlalu banyak dari satu karakter dapat dihindari.

Simpan hasil yang diambil dalam Map pada referensi useRef: const cache = useRef(new Map()). Sebelum mengambil data, periksa if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Setelah pengambilan data berhasil, simpan hasilnya. Dengan begitu, permintaan jaringan berulang untuk kueri yang sudah pernah diketik pengguna dapat dihilangkan.

Khusus untuk pelengkapan otomatis, jeda penundaan 200–300 md adalah titik yang paling sesuai. Jeda yang lebih singkat (di bawah 200 md) memicu terlalu banyak permintaan bagi pengguna yang mengetik cepat. Jeda yang lebih lama (di atas 400 md) membuat saran terasa lambat dan tidak responsif. 250 md adalah nilai bawaan yang umum digunakan dalam penerapan pelengkapan otomatis di lingkungan produksi.

Mengapa AbortController penting dalam pelengkapan otomatis dengan penundaan yang mengambil data dari API?

Ganti pemfilteran statis dengan pengambilan data dari API di dalam useEffect yang bergantung pada nilai yang telah diberi jeda. Gunakan AbortController untuk membatalkan permintaan lama. Tambahkan status isLoading dan error agar pengguna mendapatkan informasi. Tetapkan ambang batas karakter minimum untuk menghindari panggilan berlebihan. Simpan hasil dalam referensi untuk melewati permintaan jaringan yang berulang.