ReactDOM CreateRoot: A Quick Guide To Better Rendering

Why did React introduce createRoot in React 18?

The goal was to improve rendering and make React applications more responsive. This method brings concurrent rendering, allowing React to handle UI updates more smoothly.

Understanding reactdom createroot helps developers take full advantage of these improvements.

This blog breaks it down with simple explanations and code examples. It also covers best practices for switching from older ReactDOM methods.

What is ReactDOM createRoot?

ReactDOM createRoot is a method introduced in React 18 to create a React root. It replaces ReactDOM.render, providing a more efficient approach to rendering in modern React applications. With this change, ReactDOM now fully supports concurrent rendering, allowing multiple tasks to run simultaneously without blocking the DOM updates.

Why Was createRoot Introduced?

The React team introduced createRoot to handle the limitations of the legacy ReactDOM.render method. Previously, updates to the UI could cause blocking operations, leading to sluggish user input handling. The new approach improves React component updates and interaction responsiveness.

How to Use ReactDOM createRoot

Basic Implementation

Using ReactDOM createRoot requires importing it from react-dom/client. The root container is then assigned a DOM node, where the React components will be rendered.

1import React from "react";
2import ReactDOM from "react-dom/client";
3import App from "./App"; // Importing the main React component
4
5const container = document.getElementById("root"); // GetElementById root
6const root = ReactDOM.createRoot(container); // Creating a new root
7
8root.render(<App />); // Start rendering

​

Understanding Key Changes

1. createRoot is required for concurrent rendering.

2. The target container (a DOM node) is specified as an argument.

3. The root object is created once and reused throughout the React application lifecycle.

4. root.render() replaces ReactDOM.render(), improving rendering control.

ReactDOM createRoot vs ReactDOM render

Before React 18, ReactDOM.render was the default method for mounting React components. With createRoot, the process has evolved, affecting how developers manage the DOM elements.

Feature	ReactDOM.render (Legacy)	ReactDOM createRoot (React 18)
Concurrent Rendering	❌ Not supported	✅ Fully supported
Batching Updates	Limited	Improved
Strict Mode Behavior	Partial	Enforces strict effects
Hydration	Manual	Automatic

Example of Legacy ReactDOM.render

1import React from "react";
2import ReactDOM from "react-dom";
3import App from "./App";
4
5ReactDOM.render(<App />, document.getElementById("root")); // GetElementById root

​

In contrast, createRoot ensures a more structured and performance-oriented rendering process.

Handling Multiple React Roots on the Same Page

React 18 allows multiple roots on the same page, where different parts of the UI can be managed separately. This is useful when integrating React into an existing web development project alongside a different framework.

1const container1 = document.getElementById("root1");
2const root1 = ReactDOM.createRoot(container1);
3root1.render(<App />);
4
5const container2 = document.getElementById("root2");
6const root2 = ReactDOM.createRoot(container2);
7root2.render(<AnotherComponent />);

​

This method enables independent React roots, preventing conflicts in the same container.

Strict Mode and ReactDOM createRoot

Using React.StrictMode with createRoot helps developers identify potential issues during the rendering process.

1import React from "react";
2import ReactDOM from "react-dom/client";
3import App from "./App";
4
5const container = document.getElementById("root");
6const root = ReactDOM.createRoot(container);
7
8root.render(
9  <React.StrictMode>
10    <App />
11  </React.StrictMode>
12);

​

Strict Mode ensures that event handlers and effects are tested by running them twice, aiding in the detection of side effects.

Hydration and ReactDOM createRoot

For server-side rendering (SSR), hydrateRoot is used instead of createRoot to preserve the DOM elements.

1import React from "react";
2import { hydrateRoot } from "react-dom/client";
3import App from "./App";
4
5const container = document.getElementById("root");
6hydrateRoot(container, <App />);

​

Hydration prevents unnecessary re-renders while maintaining React components on the client side.

Common Errors and Troubleshooting

1. Calling createRoot on the Same DOM Node

Error:

1Target container is not a DOM element.

​

Solution:

Ensure that the target container is a valid DOM node.

1const container = document.getElementById("root");
2if (container) {
3  const root = ReactDOM.createRoot(container);
4  root.render(<App />);
5}

​

2. Replacing Legacy ReactDOM.render

If an application still uses ReactDOM.render, updating to createRoot may cause unexpected behaviors.

1const container = document.getElementById("root");
2const root = ReactDOM.createRoot(container); // Creating a new root
3
4root.render(<App />);

​

3. Handling Unmounted Components

If an object is unmounted incorrectly, it may cause an error.

1root.unmount();

​

Ensure that the root object is correctly unmounted when no longer needed.

How ReactDOM createRoot Works

1graph TD;
2  A[React App Starts] --> B[GetElementById root];
3  B --> C[Create Root Object];
4  C --> D[Render Root Component];
5  D --> E[React Components Mounted];
6  E -->|User Interaction| F[Component Updates];
7  F --> G[Re-Render];

​

This flow illustrates how ReactDOM createRoot initializes the root container, mounts React components, and processes updates.

Best Practices for Using ReactDOM createRoot

1. Always use createRoot instead of ReactDOM.render.

2. Use a single root unless the same page requires multiple roots.

3. Ensure getElementById root is correctly defined before rendering.

4. Use React.StrictMode for better debugging and adherence to modern standards.

5. Properly handle unmounting of components to prevent memory leaks.

Wrapping Up: Making the Most of ReactDOM createRoot

Switching to ReactDOM createRoot helps React apps run smoother and respond faster. It replaces ReactDOM.render and brings better control over rendering.

By using it, developers can improve how components update, especially in complex projects. Staying updated with React’s latest changes keeps applications performing well and easier to maintain.

For teams moving to React 18, using ReactDOM createRoot is a smart step toward better, more responsive web apps.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.