Pratik Uygulamalar: Arama, Kaydırma, Yeniden Boyutlandırma

Canlı arama bileşeninde iki ayrı durum değişkeni tutun: ham girdi için inputValue (her tuş vuruşunda güncellenir ve girdi alanını duyarlı tutar) ve useDebounce(inputValue, 300) ile elde edilen debouncedQuery (yazmayı bıraktıktan 300 ms sonra güncellenir ve API çağrısını başlatır). Bu ayrım, aşırı sayıda istek göndermeden anında görsel geri bildirim sağlar.

Yükleme göstergesini yalnızca API çağrısı başladığında değil, kullanıcı yazmaya başlar başlamaz gösterin. Geciktirme beklemedeyken bu değerler eşzamanlı olmadığından, inputValue !== debouncedQuery olduğunda isLoading: true ayarlayın. Sorgu kararlı hale gelip veri alma işlemi tamamlandığında yeniden false olarak ayarlayın. Kullanıcılar süreç boyunca duyarlı bir yükleme göstergesi görür.

Bir paralaks efekti veya okuma ilerleme çubuğu, kaydırma konumuna göre güncellenir. Kaydırma işleyicisini 16 ms gecikme kullanarak saniyede en fazla 60 kareyle sınırlayın: const throttledScrollY = useThrottle(scrollY, 16). Böylece kullanıcı arayüzü, kaydırmanın her pikselinde konumu yeniden hesaplamanın getireceği maliyet olmadan akıcı biçimde güncellenir.

Düzeni yeniden hesaplamak için pencerenin yeniden boyutlandırılmasını dinlemek, hız sınırlamak yerine geciktirilerek yapılmalıdır. Düzen hesaplamasının yalnızca kullanıcı yeniden boyutlandırmayı bitirdikten sonra bir kez çalışması yeterlidir. Pencere boyutlarına 200 ms geciktirme uygulayın. Yeniden boyutlandırma sürüklemesi sırasında kullanıcı arayüzü basitleştirilmiş bir durum gösterebilir; yeniden hesaplanan düzen, yeniden boyutlandırma durduğunda görünür.

debouncedQuery değiştiğinde yeni bir AbortController oluşturun ve signal değerini fetch(url, { signal }) çağrısına aktarın. controller.abort() çağrısını yapan bir temizleme işlevi döndürün. Böylece yeni bir geciktirilmiş sorgu geldiğinde önceki sorgunun devam eden isteği iptal edilir ve yavaş gelen eski yanıtın daha hızlı gelen yeni yanıtın üzerine yazdığı yarış koşulları önlenir.

AbortController olmadan kullanıcı "re" yazıp bekler, ardından "react" yazarsa ikinci sorgu, önbellekleme nedeniyle birinciden önce dönebilir. Arama sonuçları kısa süreliğine React sonuçlarını gösterir, ardından eski "re" sonuçlarıyla üzerine yazılır. AbortController, önceki isteği tamamen iptal ederek bunu önler.

Açılır liste, API çağrıları için geciktirmeyi ve girdi görüntüleme için anında durumu birleştirir. inputValue, metin alanında ne görüneceğini denetler. useDebounce(inputValue, 250), önerilerin ne zaman getirileceğini denetler. Öneri listesi, her iki girdi durumundan da ayrı olan, getirilen sonuçların durumundan oluşturulur.

E-posta adresinin zaten var olup olmadığını denetlemek gibi asenkron form doğrulaması, her tuş vuruşunda sunucuyu gereksiz yere yormamak için geciktirilmelidir. Alan değerine 400 ms geciktirme uygulayın ve doğrulama isteğini, geciktirilmiş değere bağlı olan bir useEffect içinde başlatın. Doğrulama beklemedeyken alanda bir yükleme göstergesi gösterin.

Geciktirme, kullanıcı yazarken form içeriğini otomatik kaydetmek için idealdir. Form değerleri nesnesine 1000 ms geciktirme uygulayın. Geciktirilmiş değer değiştiğinde localStorage'a veya bir API uç noktasına kaydetme işlemini başlatın. Geciktirme beklemedeyken kullanıcı "Kaydediliyor..." göstergesini, istek tamamlandığında ise "Kaydedildi" göstergesini görür.

Gecikme değerleri, kullanıcı deneyimiyle ilgili kararlardır. Arama için 200-300 ms, duyarlılık ile daha az istek gönderme arasında denge kurar. Yeniden boyutlandırma için 150-200 ms kabul edilebilir; çünkü kullanıcılar yeniden boyutlandırmadan sonra düzenin oturmasını bekler. Otomatik kaydetme için 1000 ms, kullanıcılara kaydetmeden önce bir cümle yazacak kadar zaman tanır. Değeri, beklenen etkileşim hızına göre ayarlayın.

Gerçek uygulamalar genellikle aynı anda birden çok iyileştirmeye ihtiyaç duyar. Bir belge düzenleyici otomatik kaydetmeyi geciktirebilir (1 sn), kelime sayısı hesaplamasını hız sınırlayabilir (500 ms) ve analiz için IntersectionObserver kullanabilir. Bu teknikler, her biri kendi zamanlayıcısı ve kapsamı üzerinde bağımsız çalıştığı için birlikte iyi çalışır.

Geciktirilmiş bir arama sorgusuyla birlikte neden AbortController kullanmalısınız?

Arama girdileri, yeniden boyutlandırma işleyicileri ve formu otomatik kaydetme için useDebounce kullanın. Kaydırma ve fare hareketi için useThrottle kullanın. Yarış koşullarını önlemek için geciktirilmiş API çağrılarını her zaman AbortController ile birleştirin. Kullanıcı arayüzünü duyarlı ve bilgilendirici tutmak için inputValue !== debouncedQuery olduğunda yükleme durumunu gösterin.