Meydan okuma: Concurrent arama
- React kursu
- Uzman seviye
- Ders 30/32
- 6 dk
useDeferredValue ile akıcı çalışan bir arama yazarsın.
Meydan okuma: Concurrent arama
Bu meydan okumada useTransition ile concurrent bir arama kutusu yazacaksın. Input akıcı kalırken arama arka planda yapılır.
isPending ile bekleme sırasında bir yükleniyor göstergesi gösterilir. Sonuçlar bir listede sıralanır. Büyük listelerde bile uygulama donmaz. Kullanıcı yazdıkça sonuçlar aşamalı olarak güncellenir.
Uygulama SearchBox bileşenini yaz
SearchBox yaz. useState ve useTransition içe aktar. useState('') ile query, useTransition ile isPending ve startTransition. items.filter(i => i.includes(query)) ile results. <input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} /> ve isPending ? <p>Aranıyor</p> : <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>. Dışa aktar.
Başlangıç kodu
// SearchBox bileşenini buraya yazÖrnek çözüm
import { useState, useTransition } from 'react';
function SearchBox({ items }) {
const [query, setQuery] = useState('');
const [isPending, startTransition] = useTransition();
const results = items.filter(i => i.includes(query));
return (
<div>
<input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />
{isPending ? <p>Aranıyor</p> : <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>}
</div>
);
}
export default SearchBox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useTransition ne döndürür?
- [state, setState]
- [value, setValue]
- [isPending, startTransition] Doğru cevap
- [ref, setRef]
Açıklama: useTransition [isPending, startTransition] döndürür.
2 Boşluğu doldur: input onChange içinde transition
<input value={query} onChange={e => ____(() => setQuery(e.target.value))} /><input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />Açıklama: startTransition ile güncelleme ertelenir.