useDebounce
- React kursu
- Orta seviye
- Ders 7/80
- 4 dk
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.
Başlangıç kodu
import { useState, useEffect } from "react";
// useDebounce hook'unu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useDebounce nerede kullanışlıdır?
- useEffect temizliğinde
- Bileşen ilk açılışında
- CSS animasyonlarında
- Arama kutusunda API isteği azaltmak Doğru cevap
Açıklama: Arama kutularında API isteğini azaltır.
2 Zamanlayıcı temizliği
Önceki zamanlayıcıyı temizlemek için ____ çağrılır.Önceki zamanlayıcıyı temizlemek için clearTimeout çağrılır.Açıklama: clearTimeout ile temizlenir.
3 useDebounce adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useState |
debounced |
setTimeout |
Gecikme |
clearTimeout |
Temizlik |
[value, delay] |
Bağımlılık |