Özel useThrottle Kancası Uygulama

Gecikmeli çalıştırma her olayda bir zamanlayıcıyı basitçe sıfırlar. Hız sınırlama ise son çalıştırmanın ne zaman gerçekleştiğini etkin biçimde izlemeli ve bir sonraki çalıştırma için yeterli zamanın geçip geçmediğine karar vermelidir. Bu, yeniden çizimler arasında bir zaman damgasının korunmasını gerektirir ve uygulamayı gecikmeli çalıştırmadan biraz daha karmaşık hâle getirir.

Son çalıştırmanın zaman damgası, kendi başına yeniden çizimleri tetiklemeden yeniden çizimler arasında korunmalıdır; bu nedenle useRef doğru araçtır. Zaman damgasını const lastRunTime = useRef(Date.now()) olarak saklayın. Durumun aksine, bir referansı güncellemek yeniden çizime neden olmaz; böylece hız sınırlama mantığı ek döngüler olmadan verimli biçimde çalışır.

useThrottle(value, delay) kancası, giriş değerinin hız sınırlanmış bir sürümünü döndürür. Sözleşmesi useDebounce ile benzerdir: herhangi bir değeri ve milisaniye cinsinden bir gecikmeyi kabul eder, ardından hız sınırlanmış değeri döndürür. Bileşenler bunu aynı şekilde kullanabilir; böylece farklı zamanlama davranışları için doğrudan kullanılabilen bir alternatif elde edilir.

Son kenar hız sınırlaması, her aralığın sonunda değeri günceller. Yeni bir değer geldiğinde, kalan aralık süresi için bir setTimeout planlayın: delay - (Date.now() - lastRunTime.current). Zamanlayıcı çalıştığında durumu güncelleyin ve yeni lastRunTime değerini kaydedin. Temizleme sırasında önceki zamanlayıcıları iptal edin.

Ön kenar hız sınırlaması, ilk değeri hemen uygular ve aralık sona erene kadar sonraki değerleri yok sayar. Şunu kontrol edin: Date.now() - lastRunTime.current >= delay ise durumu güncelleyin ve zamanı kaydedin. Aksi hâlde güncellemeyi atlayın. Bu, ilk işlemde anında geri bildirim ve ardından bir bekleme süresi sağlar.

En iyi kullanıcı deneyimi çoğu zaman ikisini birleştirir: ilk olaya hemen yanıt verin (ön kenar), ardından aralık bittikten sonra son durumun da uygulanmasını sağlayın (son kenar). Böylece kullanıcı hızlı bir ilk yanıt görür ve hareket durduktan sonra son değer her zaman uygulanır; bu da güncel olmayan bir son durumun oluşmasını önler.

Bekleyen zaman aşımı kimliğini bir useRef içinde saklayın: const timeoutRef = useRef(null). Yeni bir zaman aşımı planlamadan önce, mevcut olanı iptal etmek için clearTimeout(timeoutRef.current) çağırın. Bu, tek bir hız sınırlama aralığında birden çok güncelleme yapılmasına yol açabilecek, üst üste binen zamanlayıcıları önler.

useEffect temizleme işlevi, bileşen kaldırıldığında bekleyen son kenar güncellemesini iptal etmek için clearTimeout(timeoutRef.current) çağırmalıdır. Aksi hâlde bekleyen zaman aşımı kaldırılmış bileşen üzerinde çalışarak durumu ayarlamaya çalışır ve React uyarılarına neden olabilir.

Değer tabanlı bir kanca yerine useCallback tabanlı bir hız sınırlama kancası oluşturabilirsiniz: useThrottledCallback(fn, delay) bir işlevin hız sınırlanmış sürümünü döndürür. Hız sınırlamak istediğiniz işlem tepkisel bir değer yerine bir işlev çağrısı olduğunda (örneğin bir analiz izleyicisi için) bu yaklaşım daha esnektir.

Jest testlerinde zamanı denetlemek için jest.useFakeTimers() kullanın. 1000 ms gecikmeli bir hız sınırlaması ayarlayın, art arda 10 hızlı değer değişikliği tetikleyin, ardından sahte zamanı 500 ms ilerletin ve yalnızca 1 veya 2 güncelleme yapıldığını kontrol edin. 500 ms daha ilerletin ve son kenar güncellemesinin çalıştığını doğrulayın. Bu, hız sınırlama davranışını güvenilir biçimde doğrular.

React, işlemeler sırasında durum güncellemelerini toplu hâlde işler. Durum güncellemeleri üzerinde çalışan bir hız sınırlaması bu modelle sorunsuz biçimde çalışır. Ancak React 18 Eşzamanlı Modunda işlemelerin kesintiye uğrayabileceğini unutmayın. Gerçek saat zamanına Date.now() aracılığıyla dayanan hız sınırlama mantığı, React'in zamanlamasından etkilenmez.

Son kenar hız sınırlaması hangi kenarda çalışır?

Hız sınırlama, son yürütme zamanını useRef ile izlemenizi gerektirir. Kanca, ön kenarı (anında), son kenarı (ertelenmiş) veya her ikisini uygulayabilir. Zaman aşımı kimliğini her zaman bir referans içinde saklayın ve temizleme sırasında iptal edin. İşlev tabanlı kullanım durumlarında useThrottledCallback kalıbını tercih edin. Güvenilirlik için sahte zamanlayıcılarla test edin.