Concurrent Mode API Reference (Experimental)

Laman ini merupakan referensi API untuk Mode Concurrent React. Jika Anda mencari panduan dasar, gunakan Concurrent UI Patterns

Catatan: Fitur ini merupakan versi Pratinjau Komunitas dan bukan versi rilis yang stabil. Besar kemungkinan akan perubahan dari API yang terdapat pada laman ini. Gunakan sesuai dengan resiko Anda sendiri!

• Mengaktifkan Mode Concurrent

  • createRoot
  • createBlockingRoot

• Suspense

  • Suspense
  • SuspenseList
  • useTransition
  • useDeferredValue

Mengaktifkan Mode Concurrent

createRoot

ReactDOM.createRoot(rootNode).render(<App />);

Menggantikan ReactDOM.render(<App />, rootNode) dan mengaktifkan Mode Concurrent.

Untuk informasi lebih lanjut mengenai Mode Concurrent, silahkan lihat dokumentasi Mode Concurrent.

createBlockingRoot

ReactDOM.createBlockingRoot(rootNode).render(<App />)

Menggantikan ReactDOM.render(<App />, rootNode) dan mengaktifkan Mode Blocking.

Dengan menggunakan Mode Concurrent akan merubah landasan cara kerja React. Hal ini berarti Anda tidak bisa menggunakan Mode Concurrent untuk beberapa komponen saja. Oleh sebab itu, kemungkinan beberapa aplikasi tidak bisa langsung mengimplementasikan Mode Concurrent.

Mode Blocking terdiri dari sebagian fitur-fitur Mode Concurrent yang ditujukan untuk proses peralihan aplikasi yang belum bisa mengadopsi secara langsung.

Suspense API

Suspense

<Suspense fallback={<h1>Loading...</h1>}>
  <ProfilePhoto />
  <ProfileDetails />
</Suspense>

Suspense memungkinkan komponen Anda “menunggu” sesuatu sebelum di render, dengan menampilkan fallback selama menunggu.

Pada contoh berikut ini, ProfileDetails menunggu panggilan API asynchronous untuk mendapatkan data. Selama menunggu ProfileDetails dan ProfilePhoto, kita dapat menampilkan fallback berupa Loading.... Hal penting yang perlu dicatat yaitu jika semua anak komponen (children) dari <Suspense> belum siap, tampilan fallback akan terus muncul.

Suspense memiliki dua props:

• fallback untuk indikator menunggu. fallback akan terus ditampilkan sampai semua anak komponen dari Suspense sudah selesai di render.
• unstable_avoidThisFallback sebagai boolean. React menggunakan prop ini untuk “menghindari” tampilan fallback diawal inisialisasi. Besar kemungkinan API ini akan dihapus di rilis yang akan datang.

<SuspenseList>

<SuspenseList revealOrder="forwards">
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

SuspenseList bisa membantu koordinansi beberapa komponen sekaligus yang perlu diatur urutan penampilannya kepada pengguna.

Ketika sejumlah komponen memerlukan data, kita tidak selalu bisa memprediksi urutan data yang sampai. Tetapi, jika kita bungkus komponen-komponen ini ke dalam SuspenseList, React tidak akan menampilkan suatu komponen hingga komponen sebelumnya sudah tampil (dapat diatur lebih lanjut).

SuspenseList memiliki dua props:

• revealOrder (forwards, backwards, together) mengatur urutan munculnya komponen yang ada di dalam SuspenseList.

  • together akan menampilkan semua komponen secara bersamaan ketika sudah siap dibanding satu per satu.

• tail (collapsed, hidden) mengatur perilaku komponen di dalam SuspenseList yang belum siap.

  • Secara umum, SuspenseList akan menampilkan semua fallbacks.
  • collapsed hanya akan menampilkan fallback berikutnya dari anak komponen.
  • hidden tidak akan menampilkan fallback apapun.

Perlu dicatat bahwa SuspenseList hanya akan melihat komponen Suspense dan SuspenseList terdekat. SuspenseList tidak akan melihat lebih dari satu level di bawahnya. Tetapi, jika dibutuhkan Anda bisa menumpuk beberapa komponen SuspenseList satu sama lain untuk membuat sebuah kerangka.

useTransition

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);

useTransition bisa digunakan untuk mencegah kondisi pembaruan (loading state) yang tidak diinginkan dengan cara menunggu konten muncul sebelum berpindah ke tampilan berikutnya. Dan juga hal ini bisa membantu mengontrol komponen agar memprioritaskan render yang lebih penting, seperti ketika pembaruan data untuk ditahan sampai render berikutnya.

Hook useTransition menghasilkan dua nilai dalam sebuah senarai.

• startTransition sebuah fungsi dengan masukan callback. Bisa digunakan untuk memberitahu React state mana yang perlu ditunda.
• isPending sebuah boolean. Digunakan React untuk memberitahu jika sedang dalam proses penangguhan state tertentu.

Jika proses pembaruan state mengakibatkan sebuah komponen ditangguhkan, pembaruan state tersebut harus dimasukkan ke dalam transition.

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

function App() {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
  return (
    <>
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId);
            setResource(fetchProfileData(nextUserId));
          });
        }}
      >
        Next
      </button>
      {isPending ? " Loading..." : null}
      <Suspense fallback={<Spinner />}>
        <ProfilePage resource={resource} />
      </Suspense>
    </>
  );
}

Dalam contoh potongan kode, proses pengambilan data dienkapsulasi dengan startTransition. Ini berarti permintaan data akan segera dieksekusi selagi menangguhkan render halaman profil dan komponen Spinner selama 2 detik (sesuai dengan waktu yang tertera di timeoutMs).

Boolean isPending mengindikasikan React bahwa komponen sedang dalam transisi yang bisa kita gunakan untuk memberitahu pengguna dengan menampilkan sebuah pesan di halaman profil sebelumnya.

Untuk informasi lebih jauh tentang transisi dapat dilihat di Concurrent UI Patterns.

Konfigurasi useTransition

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

useTransition dapat menggunakan parameter timeoutMs sebagai tambahan Konfigurasi Suspense. Parameter ini (dalam mili detik) digunakan React sebagai penanda berapa lama jeda sebelum berpindah ke state berikutnya (Halaman Profil baru dari contoh di atas).

Catatan: Kami merekomendasikan untuk menggunakan Konfigurasi Suspense untuk tiap modul yang berbeda.

useDeferredValue

const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });

Menghasilkan suatu nilai yang “tertunda” sampai kurun waktu timeoutMs.

Biasanya digunakan untuk memastikan tampilan tetap responsif ketika suatu hal perlu di tampilkan seketika dari interaksi pengguna sedangkan harus menunggu proses pengambilan data juga.

Salah satu contoh skenario yang tepat adalah masukan teks (text input).

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <div className="App">
      {/* Keep passing the current text to the input */}
      <input value={text} onChange={handleChange} />
      ...
      {/* But the list is allowed to "lag behind" when necessary */}
      <MySlowList text={deferredText} />
    </div>
  );
 }

Dengan metode ini kita dapat menampilkan segera teks terbaru di input yang akan membuat laman web terlihat responsif. Sementara itu, MySlowList “tertunda” sampai 2 detik berdasarkan timeoutMs sebelum diperbarui, memberikan kesempatan untuk eksekusi dengan teks terbaru di balik layar.

Untuk informasi lebih lanjut tentang penundaan, Anda dapat melihat Concurrent UI Patterns.

Konfigurasi useDeferredValue

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

useDeferredValue dapat menggunakan parameter timeoutMs sebagai tambahan Konfigurasi Suspense. Parameter ini (dalam mili detik) digunakan React sebagai penanda berapa lama jeda waktu sebuah nilai perlu ditunda.

React akan selalu menggunakan jeda waktu terkecil ketika jaringan dan peranti mendukungnya.