React
useDebounce
Bir değerin değişimini geciktiren useDebounce hook'unu yazarsın.
useDebounce
useDebounce, hızlı değişen bir değeri yavaşlatır. Kullanıcı her tuşa basışında arama yapmak yerine, belirli bir süre bekleyip sonra işlem yapar. Arama kutuları için idealdir.
Yapı: const [debounced, setDebounced] = useState(value); useEffect(() => { const t = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(t); }, [value, delay]); return debounced;.
İlke: her değer değişiminde yeni bir zamanlayıcı kurulur; bir önceki temizlenir. Böylece yalnızca son değişimden sonra delay kadar süre geçtiyse debounced güncellenir. Bu, API istek sayısını ciddi azaltır.
Delay ve bağımlılık
Delay genellikle 300-500 ms arasında seçilir. Kısa delay debounce etkisini azaltır; uzun delay kullanıcıyı bekletir. useDebounce(value, 300) denemesi iyi bir başlangıçtır.
useEffect'in bağımlılık dizisi [value, delay] olmalıdır. value değiştiğinde yeni zamanlayıcı kurulur; delay değiştiğinde de yeniden kurulur. Böylece her zaman güncel delay kullanılır.
Bu hook, useFetch ile birlikte kullanılırsa güçlü olur: kullanıcı yazmayı bırakınca otomatik arama yapılır. Buna debounced search denir.
Uygulama useDebounce yaz
Aşağıdaki iskeleti tamamla. useDebounce(value, delay) hook'u yaz. debounced state'i value başlangıçla tanımla. useEffect içinde const t = setTimeout(() => setDebounced(value), delay); ve return () => clearTimeout(t);. Bağımlılık [value, delay]. debounced'u döndür. Hook'u dışa aktar.
Örnek çözümü göster
import { useState, useEffect } from "react";
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const t = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(t);
}, [value, delay]);
return debounced;
}
export default useDebounce;
Kendini test et
-
useDebounce nerede kullanışlıdır?
- useEffect temizliğinde
- Bileşen ilk açılışında
- CSS animasyonlarında
- Arama kutusunda API isteği azaltmak
Cevabı göster
Arama kutusunda API isteği azaltmak — Arama kutularında API isteğini azaltır.
-
Zamanlayıcı temizliği
Önceki zamanlayıcıyı temizlemek için ____ çağrılır.
Cevabı göster
Önceki zamanlayıcıyı temizlemek için clearTimeout çağrılır.
-
useDebounce adımlarını eşleştir
- useState
- debounced
- setTimeout
- Gecikme
- clearTimeout
- Temizlik
- [value, delay]
- Bağımlılık
Sıradaki ders: Özet - İleri custom hook'lar
