useDeferredValue
- React kursu
- Uzman seviye
- Ders 15/32
- 4 dk
useDeferredValue ile bir değerin yeniden çizimini ertelemeyi öğrenirsin.
useDeferredValue
useDeferredValue, bir değerin çizime ulaşmasını geciktirir. const deferred = useDeferredValue(query) yazdığında deferred eski değeri bir süre daha taşır.
Bu, büyük listeleri filtrelerken input'un akıcı kalmasını sağlar. React, ağır çizimi erteler; kullanıcı yazarken donma olmaz.
useMemo ile birlikte kullanarak ertelenmiş değere göre hesap yaparsın.
Büyük liste filtreleme
Bir arama kutusu ve 10 bin elemanlı liste düşünelim. Her tuş vuruşunda tüm listeyi filtrelemek ana iş parçacığını bloklar.
useDeferredValue ile deferredQuery alır, useMemo ile buna göre results hesaplarsın. Input hemen güncellenir, ağır filtreleme arka planda yapılır.
React, eski sonuçları gösterir ve yeni hazır olunca değiştirir.
Uygulama Search bileşenini yaz
Search yaz. items özelliği alsın. useState('') ile query, useDeferredValue(query) ile deferredQuery, useMemo ile items.filter(i => i.includes(deferredQuery)) hesapla. <input value={query} onChange={e => setQuery(e.target.value)} /> ve <ul> içinde results.map göster. Dışa aktar.
Başlangıç kodu
// Search bileşenini buraya yazÖrnek çözüm
import { useState, useDeferredValue, useMemo } from 'react';
function Search({ items }) {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);
return (
<div>
<input value={query} onChange={e => setQuery(e.target.value)} />
<ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
</div>
);
}
export default Search;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useDeferredValue kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useDeferredValue |
Değeri geciktirir |
useMemo |
Hesabı önbelleğe alır |
query |
Anlık değer |
deferred |
Eski değer bir süre |
2 useDeferredValue ne yapar?
- Bir değeri hemen günceller
- State'i siler
- Bileşeni gizler
- Bir değerin çizime ulaşmasını geciktirir Doğru cevap
Açıklama: useDeferredValue değerin yayılmasını geciktirir.
3 Boşluğu doldur: ertelenmiş değeri al
const [query, setQuery] = useState('');
const deferredQuery = use____Value(query);const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);Açıklama: useDeferredValue ile ertelenmiş değer alınır.