startTransition

startTransition(scope)

• Referensi
  • startTransition(scope)
• Penggunaan
  • Menandai sebuah pembaruan state sebagai transisi non-blocking

Referensi

startTransition(scope)

Fungsi startTransition memungkinkan Anda menandai sebuah pembaruan state sebagai transisi.

import { startTransition } from 'react';

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

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

Lihat lebih banyak contoh di bawah.

Parameter

• scope: Fungsi yang memperbarui sebuah state dengan memanggil satu atau lebih fungsi set. React segera memanggil scope tanpa parameter apapun dan menandai seluruh pembaruan state yang berada di dalam fungsi scope sebagai transisi. Mereka akan bersifat non-blocking dan tidak akan menampilkan indikator pemuatan.

Nilai Balik

startTransition tidak memiliki nilai balik apapun.

Caveats

• startTransition tidak menyediakan penanda untuk mengetahui apakah sebuah transisi sedang pending atau tidak. Untuk menampilkan indikator pending ketika sebuah transisi sedang berjalan, Anda dapat menggunakan useTransition.

• Anda hanya dapat menempatkan pembaruan state ke dalam transisi bila Anda memiliki akses terhadap fungsi set dari state tersebut. Jika Anda ingin memulai sebuah transisi sebagai respons terhadap sebuah prop atau nilai balik sebuah custom Hook, cobalah menggunakan useDeferredValue.

• Fungsi yang Anda tempatkan di dalam startTransition harus merupakan fungsi sinkronus. React langsung mengeksekusi fungsi ini dan menandai seluruh pembaruan state yang terjadi sembari eksekusi sedang berjalan sebagai sebuah transisi. Apabila Anda mencoba melakukan pembaruan state pada waktu lain (misalnya dalam sebuah timeout), mereka tak akan ditandai sebagai transisi.

• Sebuah pembaruan state yang ditandai sebagai transisi dapat diinterupsi oleh pembaruan state yang lain. Contohnya, bila Anda memperbarui sebuah komponen grafik didalam sebuah transisi, namun kemudian mengetik dalam sebuah masukan teks saat grafik tersebut masih di dalam proses re-render, React akan mengulangi proses re-render pada grafik tersebut setelah selesai melakukan pembaruan state dalam masukan teks tersebut.

• Pembaruan transisi tidak dapat digunakan untuk mengontrol masukan teks.

• Ketika terdapat beberapa transisi yang sedang berjalan, React akan menggabungkannya menjadi satu. Ini adalah sebuah keterbatasan yang kemungkinan besar akan diperbaiki pada rilis React selanjutnya.

Penggunaan

Menandai sebuah pembaruan state sebagai transisi non-blocking

Anda dapat menandai sebuah pembaruan state sebagai sebuah transisi dengan memasukkannya ke dalam pemanggilan startTransition:

import { startTransition } from 'react';

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

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

Transisi memungkinkan pembaruan antarmuka pengguna (user interface) tetap responsif, bahkan dalam gawai yang relatif lamban.

Dengan sebuah transisi, antarmuka aplikasi Anda akan tetap responsif di tengah proses re-render. Sebagai contoh, ketika pengguna menekan sebuah tab tetapi kemudian berubah pikiran dan menekan tab lain, mereka dapat tetap melakukannya tanpa perlu menunggu proses re-render pertama untuk selesai.