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: A function that updates some state by calling one or more set functions. React calls action immediately with no parameters and marks all state updates scheduled synchronously during the action function call as Transitions. Any async calls awaited in the action will be included in the transition, but currently require wrapping any set functions after the await in an additional startTransition (see Troubleshooting). State updates marked as Transitions will be non-blocking and will not display unwanted loading indicators..

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.

• If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.

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.