startTransition
startTransition
, kullanıcı arayüzünü (UI) bloklamadan state’i güncellemenizi sağlar.
startTransition(scope)
Başvuru dokümanı
startTransition(scope)
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
scope
: Bir veya birden fazlaset
fonksiyonu kullanarak bazı state’leri güncelleyen bir fonksiyondur. React,scope
fonksiyon çağrısı sırasında eş zamanlı olarak planlanan tüm state güncellemelerini transition olarak işaretler ve herhangi bir parametre olmaksızınscope
’u hemen çalıştırır. Bu güncellemeler engelleme yapmaz (non-blocking) ve istenmeyen yükleme animasyonları göstermez.
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çinuseTransition
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 yerineuseDeferredValue
özelliğini kullanmayı deneyebilirsiniz. -
startTransition
’a ilettiğiniz fonksiyon, eşzamanlı olarak çalışabilecek bir fonksiyon olmalıdır. React, bu fonksiyonu hemen çalıştırır ve çalışırken gerçekleşen tüm state güncellemelerini transition olarak işaretler. Sonrasında daha fazla state güncellemesi yapmaya çalışırsanız (örneğin, bir zaman aşımında), bunlar transition olarak işaretlenmezler. -
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.
-
Eğer birden fazla transition işlemi devam ediyorsa, React şu an için bu güncellemeleri birleştirir. Ancak bu durum, ileride kaldırılması beklenen bir kısıtlamadı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.