Meydan okuma: Concurrent arama

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.

Örnek çözümü göster

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;

Kendini test et

useTransition ne döndürür?
- [state, setState]
- [value, setValue]
- [isPending, startTransition]
- [ref, setRef]
Cevabı göster

[isPending, startTransition] — useTransition [isPending, startTransition] döndürür.

Boşluğu doldur: input onChange içinde transition

<input value={query} onChange={e => ____(() => setQuery(e.target.value))} />

Cevabı göster

<input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />

Sıradaki ders: Meydan okuma: Streaming sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler