React
useDeferredValue
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.
Örnek çözümü göster
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;
Kendini test et
-
useDeferredValue kavramlarını eşleştir
- useDeferredValue
- Değeri geciktirir
- useMemo
- Hesabı önbelleğe alır
- query
- Anlık değer
- deferred
- Eski değer bir süre
-
useDeferredValue ne yapar?
- Bir değeri hemen günceller
- State'i siler
- Bileşeni gizler
- Bir değerin çizime ulaşmasını geciktirir
Cevabı göster
Bir değerin çizime ulaşmasını geciktirir — useDeferredValue değerin yayılmasını geciktirir.
-
Boşluğu doldur: ertelenmiş değeri al
const [query, setQuery] = useState('');
const deferredQuery = use____Value(query);
Cevabı göster
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
Sıradaki ders: Özet - Concurrent features
