useTransition
- React kursu
- Uzman seviye
- Ders 14/32
- 4 dk
useTransition ile ağır güncellemeleri düşük öncelikli yapmayı öğrenirsin.
useTransition
useTransition, bir güncellemeyi ertelenmiş olarak işaretler. [isPending, startTransition] döndürür.
startTransition(() => setTab(1)) yazdığında React bu güncellemeyi arka planda hazırlar. Acil güncellemeler (input) hemen çizilir; transition hazır olunca uygulanır.
isPending ile bekleme sırasında bir yükleniyor göstergesi verebilirsin. Bu, sekme geçişlerini akıcı yapar.
Tab geçişinde transition
Bir sekme (tab) değiştiğinde içerik ağır olabilir. startTransition içine alırsan sekme düğmesi hemen güncellenir, içerik arka planda hazırlanır.
Kullanıcı hızlıca sekmeler arası geçerken React eski çizimi gösterir, yeni hazır olunca değiştirir. Bu, donmayı önler.
isPending ile geçiş sırasında düğmeyi soluk gösterebilirsin.
Uygulama TabSwitcher bileşenini yaz
TabSwitcher yaz. useState(0) ile tab, useTransition ile isPending ve startTransition al. <button onClick={() => startTransition(() => setTab(1))}>Sonraki</button> ve isPending ? <p>Yükleniyor</p> : <p>{tab}</p> döndür. Dışa aktar.
Başlangıç kodu
// TabSwitcher bileşenini buraya yazÖrnek çözüm
import { useState, useTransition } from 'react';
function TabSwitcher() {
const [tab, setTab] = useState(0);
const [isPending, startTransition] = useTransition();
return (
<div>
<button onClick={() => startTransition(() => setTab(1))}>Sonraki</button>
{isPending ? <p>Yükleniyor</p> : <p>{tab}</p>}
</div>
);
}
export default TabSwitcher;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: isPending ile bekleme göster
const [isPending, startTransition] = useTransition();
return isPending ? <p>____</p> : <Content />;const [isPending, startTransition] = useTransition();
return isPending ? <p>Yükleniyor</p> : <Content />;Açıklama: isPending true iken bekleme metni gösterilir.
2 startTransition ne işe yarar?
- Bileşeni gizler
- State'i siler
- Bir güncellemeyi ertelenmiş işaretler Doğru cevap
- CSS ekler
Açıklama: startTransition güncellemeyi arka planda hazırlar.
3 useTransition kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
startTransition |
Ertelenmiş güncelleme |
isPending |
Bekleme durumu |
acil güncelleme |
Hemen çizilir |
tab |
Geçiş yapılan içerik |