createRoot memungkinkan Anda untuk membuat sebuah akar untuk menampikan komponen React dalam node DOM pada peramban.

const root = createRoot(domNode, options?)

Referensi

createRoot(domNode, options?)

Panggil createRoot untuk membuat akar React untuk menampilkan konten di elemen DOM pada peramban.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

React akan membuat sebuah akar untuk domNode dan mengambil alih pengelolaan DOMnya. Setelah Anda membuat akar, Anda harus memanggil root.render untuk menampilkan komponen React di dalam DOM tersebut:

root.render(<App />);

Aplikasi yang sepenuhnya dibuat dengan React biasanya cukup memanggil createRoot sekali saja untuk komponen akarnya. Sedangkan untuk halaman yang “dihiasi” oleh bagian yang menggunakan React mungkin dapat memiliki akar sebanyak yang diperlukan.

Lihat contoh-contoh lainnya di bawah ini.

Parameter

  • domNode: Sebuah elemen DOM. React akan membuat akar untuk elemen DOM ini dan memungkinkan Anda untuk memanggil fungsi lain pada akar, seperti render untuk menampilkan konten React yang sudah di-render.

  • opsional options: Sebuah objek dengan opsi-opsi berikut untuk akar React ini.

    • opsional onCaughtError: Callback yang dipanggil saat React menangkap error di Error Boundary. Dipanggil dengan error yang ditangkap oleh Error Boundary, dan objek errorInfo berisi componentStack.
    • optional onUncaughtError: Callback yang dipanggil saat error dilempar dan React tidak ditangkap oleh Error Boundary. Dipanggil dengan error yang dilempar, dan objek errorInfo berisi componentStack.
    • opsional onRecoverableError: Callback yang dipanggil saat React berhasil pulih secara otomatis dari error. Dipanggil dengan error yang dikembalikan React, dan obyek errorInfo berisi componentStack. Beberapa error yang dapat dipulihkan mungkin akan berisi kesalahan aslinya sebagai error.cause.
    • opsional identifierPrefix: Awalan string yang digunakan React untuk ID yang dihasilkan oleh useId. Berguna untuk mencegah konflik saat menggunakan banyak akar pada halaman yang sama.

createRoot mengembalikan sebuah objek dengan dua method: render dan unmount.

Catatan Penting

  • Jika aplikasi Anda di-render oleh server, penggunaan createRoot() tidak didukung. Sebagai gantinya, gunakan hydrateRoot().
  • Anda mungkin hanya akan memiliki satu panggilan createRoot pada aplikasi Anda. Jika Anda menggunakan framework, biasanya pemanggilan fungsi ini sudah dilakukan oleh framework tersebut.
  • Saat Anda ingin me-render sebagian JSX pada bagian lain dari pohon DOM yang bukan turunan dari komponen Anda (contohnya modal atau tooltip), gunakan createPortal, bukan createRoot.

root.render(reactNode)

Panggil root.render untuk menampilkan sebuah JSX (“React node”) dalam node DOM milik akar React pada peramban.

root.render(<App />);

React akan menampilkan <App /> dalam root, dan mengambil alih pengelolaan DOM di dalamnya.

Lihat contoh-contoh lainnya di bawah ini.

Parameter

  • reactNode: Sebuah React Node yang Anda ingin tampilkan. Biasanya berupa sebuah JSX seperti <App />, namun Ada juga dapat memberikan sebuah elemen React yang dibuat dengan createElement(), sebuah string, sebuah angka (number), null atau undefined.

Kembalian

root.render mengembalikan undefined.

Catatan Penting

  • Pada pemanggilan root.render pertama kali, React akan menghapus seluruh konten HTML yang ada pada akar React, sebelum me-render komponen React di dalamnya.

  • Jika node DOM akar Anda memiliki HTML yang dibuat oleh React pada server, atau proses build, gunakan hydrateRoot() agar event handler dapat dikaitkan dengan HTML yang ada.

  • Jika Anda memanggil render pada akar yang sama berulang kali, React akan memperbarui DOM sebisa mungkin hingga menyamai JSX terakhir yang Anda berikan. React akan memutuskan bagian mana dari DOM yang dapat digunakan kembali dan bagian mana yang perlu dibuat ulang, dengan melakukan “pencocokan” dengan pohon yang telah di-render sebelumnya. Pemanggilan kembali render di akar yang sama mirip dengan memanggil fungsi set pada komponen akar: React menghindari pembaharuan DOM yang tidak diperlukan.

  • Although rendering is synchronous once it starts, root.render(...) is not. This means code after root.render() may run before any effects (useLayoutEffect, useEffect) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap root.render(...) in flushSync to ensure the initial render runs fully synchronously.

    const root = createRoot(document.getElementById('root'));
    root.render(<App />);
    // 🚩 The HTML will not include the rendered <App /> yet:
    console.log(document.body.innerHTML);

root.unmount()

Panggil root.unmount untuk memusnakan pohon yang telah di-render dalam akar React.

root.unmount();

Sebuah aplikasi yang dibuat sepenuhnya dengan React biasanya tidak perlu memanggil root.unmount.

Fungsi ini biasanya berguna saat node DOM pada akar React (atau turunan lainnya) mungkin dapat terhapus dari DOM oleh kode lain. Sebagai contoh, bayangkan sebuah panel tab jQuery yang menghapus tab nonaktif dari DOM. Jika tab tersebut terhapus, seluruh isi dari DOM tersebut (termasuk akar React) juga akan ikut terhapus. Pada kasus ini, Anda perlu memberitahukan React untuk “stop” mengelola konten DOM akar yang terhapus dengan memanggil root.unmount. Jika tidak, komponen yang ada di dalam akar tersebut tidak tahu kalau mereka harus membersihkan dan membebaskan resources global seperti subscriptions.

Memanggil root.unmount akan meng-unmount seluruh komponen di dalam akar, dan “melepaskan” React dari dalam node DOM akar, termasuk menghapus event handlers dan state yang ada pada pohon.

Parameter

root.unmount tidak menerima parameter apapun.

Kembalian

root.unmount mengembalikan undefined.

Catatan penting

  • Pemanggilan root.unmount akan meng-unmount seluruh komponen pada pohon dan “melepaskan” React dari node DOM akar.

  • Begitu Anda memanggil root.unmount, Anda tidak dapat memanggil root.render kembali pada akar yang sama. Percobaan memanggil root.render pada akar yang sudah di-unmount akan menyebabkan kesalahan “Cannot update an unmounted root”. Walaupun begitu, Anda dapat membuat akar yang baru untuk node DOM yang sama setelah node pada akar sebelumnya telah di-unmount.

Penggunaan

Me-render aplikasi yang dibuat sepenuhnya dengan React

Jika aplikasi Anda dibuat sepenuhnya dengan React, buatlah sebuah akar untuk seluruh bagian aplikasi Anda.

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Biasanya, Anda cukup menjalankan kode ini sekali saja pada startup. Kode ini akan:

  1. Mencari node DOM pada peramban, yang didefinisikan di HTML Anda.
  2. Menampilkan komponen React untuk aplikasi Anda didalamnya.
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Jika aplikasi Anda dibuat sepenuhnya dengan React, Anda seharusnya tidak perlu membuat akar-akar lainnya, atau memanggil root.render kembali.