createRoot memungkinkan Anda untuk membuat sebuah induk untuk menampikan komponen React dalam node DOM pada browser.

const root = createRoot(domNode, options?)

Referensi

createRoot(domNode, options?)

Panggil createRoot untuk membuat induk React untuk menampilkan konten di elemen DOM di browser.

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

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

React akan membuat sebuah induk untuk domNode dan mengambil alih pengelolaan DOMnya. Setelah Anda membuat induk, 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 induknya. Sedangkan untuk halaman yang “dihiasi” oleh bagian yang menggunakan React mungkin dapat memiliki induk sebanyak yang diperlukan.

Lihat contoh-contoh lainnya di bawah ini.

Parameters

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

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

    • opsional onRecoverableError: Callback yang dipanggil saat React berhasil pulih secara otomatis dari kesalahan.
    • opsional identifierPrefix: sebuah string yang React gunakan untuk ID yang dibuat oleh useId. Berguna untuk mencegah konflik saat menggunakan banyak induk pada halaman yang sama.

Returns

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

Peringatan

  • Jika aplikasi Anda dirender 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 merender 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 induk React pada browser.

root.render(<App />);

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

Lihat contoh-contoh lainnya di bawah ini.

Parameters

  • 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.

Returns

root.render mengembalikan undefined.

Peringatan

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

  • Jika node DOM induk 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 induk 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 dirender sebelumnya. Pemanggilan kembali render di induk yang sama mirip dengan memanggil fungsi set pada komponen induk: React menghindari pembaharuan DOM yang tidak diperlukan.

root.unmount()

Panggil root.unmount untuk memusnakan pohon yang telah dirender dalam induk React.

root.unmount();

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

Fungsi ini biasanya berguna saat node DOM pada induk 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 induk React) juga akan ikut terhapus. Pada kasus ini, Anda perlu memberitahukan React untuk “stop” mengelola konten DOM induk yang terhapus dengan memanggil root.unmount. Jika tidak, komponen yang ada di dalam induk tersebut tidak tahu kalau mereka harus membersihkan dan membebaskan resources global seperti subscriptions.

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

Parameters

root.unmount tidak menerima parameter apapun.

Returns

root.unmount mengembalikan undefined.

Peringatan

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

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

Penggunaan

Merender Aplikasi yang Dibuat Sepenuhnya dengan React

Jika aplikasi Anda dibuat sepenuhnya dengan React, buatlah sebuah induk 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 browser, 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 induk-induk lainnya, atau memanggil root.render kembali.

Kedepannya, React akan mengelola DOM tersebut untuk seluruh aplikasi Anda. Untuk menambahkan komponen-komponen lain, pasangkan mereka di dalam komponen App. Saat Anda perlu memperbarui UI tersebut, Anda dapat melakukannya dengan menggunakan state. Saat Anda ingin menampilkan konten ekstra seperti modal atau tooltip diluar dari node DOM, render komponen tersebut dengan sebuah portal.

Note

Saat HTML Anda kosong, pengguna akan melihat sebuah halaman kosong sampai kode JavaScript aplikasi selesai dimuat dan berjalan.

<div id="root"></div>

Ini dapat terasa sangat lambat! Untuk mengatasi masalah ini, Anda dapat membuat HTML awal dari komponen Anda pada server atau saat proses build Sehingga pengunjung dapat membaca teks, melihat gambar dan mengklik tautan sebelum kode JavaScript apapun selesai dimuat. Kami merekomendasikan untuk menggunakan sebuah framework yang telah melakukan optimisasi ini sejak awal. Bergantung dari kapan proses ini berjalan, ini dapat dipanggil sebagai server-side rendering (SSR) atau static site generation (SSG).

Pitfall

Aplikasi yang dirender pada server atau pembuatan statis harus memanggil hydrateRoot, bukan createRoot. React kemudian akan menghydrate (menggunakan ulang) node-node DOM dari HTML Anda, alih-alih menghancurkan dan membuat ulang node tersebut.

Merender halaman yang sebagian dibuat dengan React

Jika halaman Anda tidak dibuat sepenuhnya dengan React, Anda dapat memanggil createRoot lebih dari sekali untuk membuat induk dari setiap bagian level teratas yang dikelola React. Anda dapat menampilkan konten yang berbeda untuk setip induk dengan memanggil root.render.

Di sini, dua komponen React yang berbeda dirender kedalam dua node DOM yang didefinisikan dalam file index.html.

import './styles.css';
import { createRoot } from 'react-dom/client';
import { Comments, Navigation } from './Components.js';

const navDomNode = document.getElementById('navigation');
const navRoot = createRoot(navDomNode); 
navRoot.render(<Navigation />);

const commentDomNode = document.getElementById('comments');
const commentRoot = createRoot(commentDomNode); 
commentRoot.render(<Comments />);

Anda dapat juga membuat node DOM baru dengan document.createElement() dan menambahkannya ke dalam dokumen secara langsung.

const domNode = document.createElement('div');
const root = createRoot(domNode); 
root.render(<Comment />);
document.body.appendChild(domNode); // Anda dapat menambahkan kode ini di manapun dalam dokumen

Untuk memusnahkan pohon React dari node DOM dan membersihkan seluruh resources yang digunakan, panggil root.unmount.

root.unmount();

Hal ini biasanya berguna saat komponen React Anda berada dalam aplikasi yang menggunakan framework yang berbeda.

Memperbarui Komponen Induk

Anda dapat memanggil render lebih dari sekali untuk induk yang sama. Selama pohon komponen tersebut sama dengan yang sebelumnya telah dirender, React akan menjaga statenya. Perhatikan bagaimana Anda dapat mengetik pada input, yang berarti pembaruan dari pemanggilan render yang berulang setiap detik pada contoh ini tidak desktruktif.

import { createRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';

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

let i = 0;
setInterval(() => {
  root.render(<App counter={i} />);
  i++;
}, 1000);

Pemanggilan render berulang kali biasanya tidak wajar. Pada umumnya komponen Anda akan memperbarui state.

Pemecahan Masalah

Saya Telah Membuat Sebuah Induk, Namun Tidak Ada yang Tampil

Pastikan Anda tidak lupa untuk merender aplikasi Anda dalam induknya:

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

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

Tidak akan ada yang tampil sampai hal tersebut Anda lakukan.

Saya Mendapatkan Pesan Kesalahan: ”Target container is not a DOM element”

Pesan kesalahan ini menyatakan apapun yang Anda berikan ke createRoot bukan sebuah node DOM.

Jika Anda tidak yakin apa yang terjadi, cobalah menglog variabel tersebut:

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

Sebagai contoh, jika domNode tersebut null, artinya getElementById mengembalikan null. Hal ini terjadi jika tidak ada node dalam dokumen yang memiliki ID yang Anda coba cari. Ada beberapa alasan yang memungkinkan:

  1. ID yang Anda cari mungkin berbeda dengan ID yang Anda gunakan pada file HTML Anda. Cek typo!
  2. Tag <script> pada bundle Anda tidak dapat “melihat” node DOM apapun yang muncul setelahnya dalam HTML.

Kesalahan umum lainnya untuk pesan kesalahan ini adalah penulisan createRoot(<App />) yang seharusnya createRoot(domNode).

Saya Mendapatkan Pesan Kesalahan: ”Functions are not valid as a React child.”

Pesan kesalahan ini menyatakan bahwa apapun yang Anda berikan pada root.render bukan sebuah komponen React.

Hal ini mungkin terjadi jika Anda memanggil root.render dengan Component, yang seharusnya <Component />.

// 🚩 Salah: App adalah fungsi, bukan komponen.
root.render(App);

// ✅ Benar: <App /> adalah komponen.
root.render(<App />);

Kemungkinan lainnya, saat Anda memberikan sebuah fungsi ke root.render, yang seharusnya hasil dari pemanggilannya.

// 🚩 Salah: createApp adalah fungsi, bukan komponen.
root.render(createApp);

// ✅ Benar: panggil createApp untuk mengembalikan sebuah komponen.
root.render(createApp());

HTML yang Dirender oleh Server Selalu Dibuat Ulang dari Awal

Jika aplikasi Anda adalah aplikasi yang dirender oleh server dan menggunakan HTML awal yang dibuat oleh React, Anda mungkin akan menyadari bahwa dengan membuat induk dan memanggil root.render menghapus seluruh HTML tersebut dan membuat ulang node-node DOM dari awal. Hal ini dapat memperlambat, mereset fokus dan posisi scroll, dan mungkin menghilangkan input dari pengguna.

Aplikasi yang dirender oleh server harus menggunakan hydrateRoot, bukan createRoot:

import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(
  document.getElementById('root'),
  <App />
);

Mohon dicatat bahwa APInya berbeda. Lebih spesifiknya, biasanya tidak akan ada lagi panggilan root.render.

PreviousClient APIsNexthydrateRoot

How do you like these docs?