Concurrent özellikler
- React kursu
- Uzman seviye
- Ders 28/32
- 5 dk
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.
Başlangıç kodu
// Button.jsx
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;
// ThemeProvider.jsx
import { createContext, useState } from 'react';
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
export default ThemeProvider;
// ProductPage.jsx
async function ProductPage() {
const res = await fetch('/api/products');
const products = await res.json();
return (
<main>
<h1>Ürünler</h1>
<ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
</main>
);
}
export default ProductPage;
// SearchPanel.jsx
// SearchPanel bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SearchPanel hangi hook'u kullanır?
- useTransition Doğru cevap
- useRef
- useReducer
- useEffect
Açıklama: useTransition ile arama arka planda yapılır.
2 Boşluğu doldur: transition başlat
const [isPending, startTransition] = use____();const [isPending, startTransition] = useTransition();Açıklama: useTransition ile transition başlatılır.
3 Concurrent kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useTransition |
Ertelenmiş güncelleme |
isPending |
Bekleme durumu |
startTransition |
Güncellemeyi sarar |
input |
Akıcı kalır |