Özet - Concurrent features
- React kursu
- Uzman seviye
- Ders 16/32
- 5 dk
Bir arama input'unda useDeferredValue ile akıcı liste yazarsın.
Özet - Concurrent features
Bu grupta Concurrent React'i, useTransition ve useDeferredValue hook'larını öğrendin.
Concurrent rendering çizimi bölünebilir hale getirir; acil güncellemeler hemen, ağır güncellemeler arka planda işlenir. Bu, kullanıcı girişinin akıcı kalmasını sağlar.
Büyük listelerde bile uygulama donmaz; kullanıcı akıcı bir deneyim yaşar. Şimdi concurrent arama bileşeni yazacaksın.
Uygulama ConcurrentSearch bileşenini yaz
ConcurrentSearch yaz. items özelliği alsın. useState('') ile query, useDeferredValue(query) ile deferred, useMemo ile items.filter(i => i.includes(deferred)). <input value={query} onChange={e => setQuery(e.target.value)} /> ve <ul> içinde results.map ile <li key={i}>{r}</li> göster. Dışa aktar.
Başlangıç kodu
// ConcurrentSearch bileşenini buraya yazÖrnek çözüm
import { useState, useDeferredValue, useMemo } from 'react';
function ConcurrentSearch({ items }) {
const [query, setQuery] = useState('');
const deferred = useDeferredValue(query);
const results = useMemo(() => items.filter(i => i.includes(deferred)), [items, deferred]);
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 ConcurrentSearch;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
- Concurrent çizimi bloklar Doğru cevap
- useDeferredValue değeri geciktirir
- isPending bekleme durumunu verir
- useTransition ertelenmiş güncelleme işaretler
Açıklama: Concurrent çizimi bloklamaz, bölünebilir yapar.
2 Boşluğu doldur: useMemo ile hesapla
const results = ____(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);Açıklama: useMemo ile hesap önbelleğe alınır.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useTransition |
Ertelenmiş güncelleme |
useDeferredValue |
Değeri geciktirir |
Concurrent |
Çizimi bölünebilir yapar |
isPending |
Bekleme durumu |