Concurrent özellikler

useTransition ile ağır filtrelemeyi düşük öncelikli yaparsın.

Concurrent özellikler

Son adımda projeye concurrent arama eklersin. SearchPanel bileşeni useTransition ile aramayı arka planda yapar; input akıcı kalır.

Başlangıç kodu, önceki üç çözümü içerir. Bu ders yalnızca SearchPanel ekler. Böylece tasarım sistemi, tema, server sayfa ve concurrent arama tek projede birleşir.

isPending ile bekleme sırasında bir yükleniyor göstergesi verilir.

isPending ile bekleme

isPending true iken kullanıcıya bir bekleme göstergesi sunarsın. Bu, aramanın arka planda devam ettiğini bildirir. Gösterge kısa ve anlamlı olmalı; kullanıcı ne beklediğini bilmelidir. Arama tamamlandığında gösterge kaybolur ve sonuç listesi görünür. Böylece uygulama tepkisiz görünmez ve kullanıcı deneyimi kesintisiz kalır.

Uygulama SearchPanel bileşenini yaz

SearchPanel yaz. useState ve useTransition içe aktar. useState('') ile query, useTransition ile isPending ve startTransition. items.filter(i => i.name.includes(query)) ile filtered. <input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} /> ve isPending ? <p>Aranıyor</p> : <ul>{filtered.map(...)}</ul>. Dışa aktar.

Örnek çözümü göster

import { useState, useTransition } from 'react';

function SearchPanel({ items }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const filtered = items.filter(i => i.name.includes(query));
  return (
    <div>
      <input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />
      {isPending ? <p>Aranıyor</p> : <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>}
    </div>
  );
}
export default SearchPanel;

Kendini test et

SearchPanel hangi hook'u kullanır?
- useTransition
- useRef
- useReducer
- useEffect
Cevabı göster

useTransition — useTransition ile arama arka planda yapılır.

Boşluğu doldur: transition başlat

const [isPending, startTransition] = use____();

Cevabı göster

const [isPending, startTransition] = useTransition();

Concurrent kavramlarını eşleştir

useTransition

Ertelenmiş güncelleme
isPending

Bekleme durumu
startTransition

Güncellemeyi sarar
input

Akıcı kalır

Sıradaki ders: Meydan okuma: Server bileşenli sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler