startTransition

startTransition(action)

• Başvuru dokümanı
  • startTransition(action)
• Kullanım
  • Bir state güncellemesini, engellemeyen transition olarak işaretlemek.

Başvuru dokümanı

startTransition(action)

startTransition fonksiyonu, bir state güncellemesini transition (geçiş) olarak işaretlemenize olanak tanır.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Daha fazla örnek için aşağıya bakınız.

Parametreler

• action: Bir veya birden fazla set fonksiyonu çağırarak bazı Stateleri güncelleyen bir fonksiyon. React, action fonksiyonunu hemen parametresiz olarak çağırır ve action fonksiyonu çağrıldığında senkronize olarak planlanan tüm State güncellemelerini Transition olarak işaretler. action içinde beklenen herhangi bir async çağrı, geçişe dahil edilecektir, ancak şu anda await sonrası herhangi bir set fonksiyonunun ek bir startTransition içinde sarılması gerekmektedir (bkz. Sorun Giderme). Transition olarak işaretlenen durum güncellemeleri bloklanmayan olacak ve istenmeyen yükleme göstergelerini göstermeyecektir..

Dönen değerler

startTransition herhangi bir şey geri döndürmez.

Uyarılar

• startTransition, bir transition işleminin beklemede olup olmadığını takip etmenin bir yolunu sunmaz. Transition işlemi sırasında ilerleme durumunu göstermek için useTransition kullanmanız gerekir.

• Bir güncellemeyi transition olarak kullanmak için, ilgili state’in set fonksiyonuna erişebilmeniz gerekiyor. Eğer bir prop veya özel bir Hook dönüş değerine yanıt olarak transition başlatmak isterseniz, bunun yerine useDeferredValue özelliğini kullanmayı deneyebilirsiniz.

• The function you pass to startTransition is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a setTimeout, for example, they won’t be marked as Transitions.

• You must wrap any state updates after any async requests in another startTransition to mark them as Transitions. This is a known limitation that we will fix in the future (see Troubleshooting).

• Bir state güncelleme işlemi transition olarak işaretlendiğinde, diğer güncelleme işlemleri bu işlemi kesintiye uğratabilir. Örneğin, bir grafik bileşenini güncelleyen transition işlemi sırasında, grafik bileşeni tekrar render işlemi devam ederken bir giriş alanına yazmaya başlarsanız, React, giriş alanındaki güncellemeyi işledikten sonra tekrar render işlemini başlatır.

• Transition güncellemeleri, metin girişlerini kontrol etmek için kullanılamaz.

• Birden fazla devam eden Transition varsa, React şu anda bunları birleştirir. Bu, gelecekteki bir sürümde kaldırılabilecek bir sınırlamadır.

Kullanım

Bir state güncellemesini, engellemeyen transition olarak işaretlemek.

Bir state güncellemesini startTransition çağrısı içine alarak transition olarak işaretleyebilirsiniz:

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Transition’lar, kullanıcı arayüzü güncellemelerini yavaş cihazlarda bile hızlı ve duyarlı tutmanıza olanak tanır.

Transition’lar ile, kullanıcı arayüzü yeniden render sırasında bile duyarlı kalır. Örneğin, kullanıcı bir sekmeye tıklar, ancak sonra fikrini değiştirir ve başka bir sekmeye tıklarsa, bunu birinci tekrar render işleminin tamamlanmasını beklemeden yapabilir.