useTransition

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.

Örnek çözümü göster

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;

Kendini test et

Boşluğu doldur: isPending ile bekleme göster

const [isPending, startTransition] = useTransition();

return isPending ? <p>____</p> : <Content />;

Cevabı göster

const [isPending, startTransition] = useTransition();

return isPending ? <p>Yükleniyor</p> : <Content />;

startTransition ne işe yarar?
- Bileşeni gizler
- State'i siler
- Bir güncellemeyi ertelenmiş işaretler
- CSS ekler
Cevabı göster

Bir güncellemeyi ertelenmiş işaretler — startTransition güncellemeyi arka planda hazırlar.
useTransition kavramlarını eşleştir

startTransition

Ertelenmiş güncelleme
isPending

Bekleme durumu
acil güncelleme

Hemen çizilir
tab

Geçiş yapılan içerik

Sıradaki ders: useDeferredValue

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler