Debounce ile Eş Zamanlı Olmayan Öneriler

Yerel bir diziyi filtrelemek yerine, sorguya göre eşleşen önerileri döndüren bir API uç noktası çağırın. API çağrısını, ertelenmiş giriş değerine bağlı olan bir useEffect içine yerleştirin. Böylece filtreleme sorumluluğu sunucuya aktarılır; yaklaşık eşleştirme, sıralama ve çok daha büyük bir veri kümesinden öneriler sunulabilir.

Otomatik tamamlamaya iki yeni durum değişkeni ekleyin: Veri getirme işlemi sürerken bir yükleme göstergesi görüntülemek için isLoading (boolean), veri getirme başarısız olduğunda hata mesajı görüntülemek için error (string veya null). Bunlar, kullanıcıların önerilerin neden görünmediğini merak etmesini önleyerek eşzamansız işlem hakkında geri bildirim sağlar.

Veri getirme useEffect etkisinin başında setIsLoading(true) ve setError(null) çağrılarını yapın; ardından fetch(url) çağrısını yapıp JSON'u ayrıştırın, setSuggestions(data) çağrısını yapın ve son olarak bir sonlandırma bloğunda veya hem başarı hem de hata yollarından sonra setIsLoading(false) çağrısını yapın. Etkinin bağımlılık dizisi yalnızca debouncedInputValue içermelidir.

Etkinin başında yeni bir AbortController oluşturun ve controller.signal değerini veri getirme seçeneklerine geçirin. Temizleme işlevinde controller.abort() çağrısını yapın. Kullanıcı yazdığında ve ertelenmiş değer değiştiğinde, yeni veri getirme işlemi başlamadan önce önceki işlem iptal edilir; böylece güncelliğini yitirmiş sonuçların yanlış sırayla gelmesi önlenir.

Bir veri getirme işlemi iptal edildiğinde, AbortError adlı bir DOMException ile reddedilir. Yakalama bloğunuzda, iptal edilen veri getirme işlemlerini sessizce yok saymak için if (err.name === 'AbortError') return; denetimini yapın. Yalnızca kullanıcıya gösterilmesi gereken gerçek ağ veya API hatalarını ele alın.

Veri getirme işleminden önce isLoading değerini true, işlem başarıyla sonuçlandıktan veya reddedildikten sonra false olarak ayarlayın. Her zaman sıfırlanmasını sağlamak için bir finally bloğu kullanın: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Sonlandırma bloğu olmadan, veri getirme hatası yükleme göstergesinin sonsuza kadar çalışmasına neden olur.

isLoading değeri true olduğunda ve giriş alanında metin bulunduğunda, öneri listesi yerine içinde ortalanmış bir yükleme göstergesi bulunan açılır listeyi gösterin. Bu, sonuçların hazırlanmakta olduğunu kullanıcıya bildirir. Yükleme tamamlanıp öneriler geldiğinde, yükleme göstergesini gerçek öneri öğeleriyle değiştirin.

error değeri null değilse, öneriler yerine hata mesajını içeren açılır listeyi gösterin. "Öneriler yüklenemedi. Lütfen yeniden deneyin." gibi bir mesaj, ham hata metninden daha kullanıcı dostudur. İsteğe bağlı olarak, veri getirme işlemini elle yeniden başlatan bir yeniden deneme düğmesi ekleyebilirsiniz.

Çok sayıda ilgisiz sonuç üreten boş dizeler veya çok kısa sorgular için veri getirmekten kaçının. Etkinin başında şu koşulu kullanın: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Bu, gereksiz API çağrılarını azaltır ve tek bir karakterden çok büyük bir sonuç listesi oluşmasını önler.

Getirilen sonuçları bir useRef Map'inde saklayın: const cache = useRef(new Map()). Veri getirmeden önce if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; } denetimini yapın. Başarılı bir veri getirme işleminden sonra sonucu saklayın. Böylece kullanıcının daha önce yazdığı sorgular için yinelenen ağ istekleri ortadan kaldırılır.

Özellikle otomatik tamamlama için 200-300 ms'lik erteleme gecikmesi ideal aralıktır. Daha kısa gecikmeler (200 ms'nin altında), hızlı yazan kullanıcılar için çok fazla istek başlatır. Daha uzun gecikmeler (400 ms'nin üzerinde) önerilerin yavaş ve tepkisiz görünmesine neden olur. 250 ms, üretim ortamındaki otomatik tamamlama uygulamalarında sık kullanılan bir varsayılan değerdir.

Bir API'den veri getiren, erteleme kullanan bir otomatik tamamlamada AbortController neden önemlidir?

Statik filtrelemeyi, ertelenmiş değere bağlı bir useEffect içindeki API'den veri getirme işlemiyle değiştirin. Güncelliğini yitirmiş istekleri iptal etmek için AbortController kullanın. Kullanıcıya geri bildirim sağlamak üzere isLoading ve error durumlarını ekleyin. Gereğinden fazla çağrı yapılmasını önlemek için minimum karakter eşiği belirleyin. Yinelenen ağ isteklerini atlamak için sonuçları bir başvuruda önbelleğe alın.