Özel useDebounce Kancası Uygulama

useDebounce kancası bir değeri ve milisaniye cinsinden bir gecikmeyi kabul eder ve bu değerin gecikmeli bir sürümünü döndürür: function useDebounce(value, delay). Döndürülen debouncedValue, gerçek değerin gerisinden gelir ve yalnızca belirtilen gecikme süresi başka bir değişiklik olmadan geçtiğinde güncellenir.

Kancanın içinde bir durum değişkeni tanımlayın: const [debouncedValue, setDebouncedValue] = useState(value). Bu durum, son onaylanmış değeri tutar. Başlangıçta ilk değere eşittir ve yalnızca gecikmeli çalıştırma zamanlayıcısı tetiklendikten sonra güncellenir. debouncedValue değerini okuyan bileşenler, kararlı hâle gelmiş bir giriş görür.

Temel mantık bir useEffect içinde bulunur: setTimeout(() => setDebouncedValue(value), delay) ile bir zamanlayıcı oluşturun ve kimliğini saklayın. Efekt, value veya delay her değiştiğinde çalışır. Zamanlayıcı son değişiklikten delay milisaniye sonra tetiklenir ve gecikmeli durumu günceller.

useEffect temizleme işlevi clearTimeout(timerId) çağrısını yapar. Zamanlayıcı tetiklenmeden önce value değiştiğinde React temizleme işlemini çalıştırarak bekleyen güncellemeyi iptal eder. Ardından yeni bir zamanlayıcı planlanır. Gecikmeli çalıştırmayı mümkün kılan temel mekanizma budur: hızlı değişiklikler zamanlayıcıyı sürekli sıfırlar.

useEffect bağımlılık dizisi [value, delay] içermelidir. Efekt, giriş değeri değiştiğinde yeniden çalışır; böylece yeni bir zamanlayıcı planlanır. Çağıran gecikme aralığını dinamik olarak ayarlarsa delay değiştiğinde de yeniden çalışır. Güncel olmayan kapanım sorunlarını önlemek için her ikisi de eklenmelidir.

Kullanımı oldukça basittir: const debouncedSearch = useDebounce(searchInput, 300). Bağımlılığı olarak [debouncedSearch] kullanan ayrı bir useEffect, uygulama programlama arayüzü çağrısını yapar. Giriş durumu (searchInput) güncellenerek girdinin yanıt vermeye devam etmesi sağlanır; yalnızca uygulama programlama arayüzü çağrısı gecikmeli çalıştırmayı bekler.

Standart uygulama varsayılan olarak yalnızca bitiş kenarında çalışır. İşlevi ilk tetiklemede çağıran, sonraki çağrıları ise gecikmeli çalıştıran bir "anında" modu için çağrının yapılıp yapılmadığını izleyen ve zaman aşımından sonra sıfırlayan bir referans gerekir. Bu daha karmaşıktır, ancak gönder düğmeleri için kullanışlıdır.

Tür güvenliği için kancayı genel hâle getirin: function useDebounce(value: T, delay: number): T. Bu, TypeScript'in debouncedValue türünü value türünden çıkarmasını sağlar. Genel tür parametresi T, dahili durum ve dönüş türü boyunca otomatik olarak aktarılır.

Sık yapılan bir hata, useEffect içinden temizleme işlevini döndürmeyi unutmaktır. Temizleme işlemi olmadan her değer değişikliği yeni bir zamanlayıcı oluşturur, ancak eski zamanlayıcıyı hiçbir zaman iptal etmez. Bunun sonucunda birden çok zamanlayıcı tetiklenir ve setDebouncedValue güncel olmayan değerlerle birden çok kez çağrılır; böylece gecikmeli çalıştırma tamamen işlevsiz hâle gelir.

Bir başka seçenek, gecikmeli çalıştırma işlevinin kendisini Lodash kullanarak bir useRef içinde saklamaktır. Duruma dayalı yaklaşımın aksine, referans yaklaşımı değerleri değil geri çağırmaları (işlevleri) gecikmeli çalıştırır. Türetilmiş bir değere ihtiyaç duyduğunuzda duruma dayalı kancayı, bir olay işleyicisini gecikmeli çalıştırmanız gerektiğinde geri çağırma yaklaşımını kullanın.

Zaman aşımı geri çağırmasının içine bir konsol günlüğü ekleyerek ve hızlı yazarken tarayıcı konsolunu izleyerek kancanızın çalıştığını doğrulayın. Her tuş vuruşu için değil, her "durma" olayı için bir günlük görmelisiniz. Hızlı yazma sırasında günlük sayısı, tuş vuruşu sayısından çok daha az olmalıdır.

useDebounce içindeki useEffect neden clearTimeout çağrısını yapan bir temizleme işlevi döndürmelidir?

useDebounce(value, delay) kancası, yalnızca delay milisaniye boyunca sessizlik olduktan sonra güncellenen gecikmeli bir durum tutar. useEffect bir zaman aşımı ayarlar ve güncel olmayan zamanlayıcıları iptal etmek için temizleme sırasında bu zaman aşımını siler. Uygulama programlama arayüzünden veri çeken efektler için gecikmeli değeri bağımlılık olarak kullanın. Tam tür güvenliği için bir TypeScript genel türü ekleyin.