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.

Copy
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; // Importing the main React component

const container = document.getElementById("root"); // GetElementById root
const root = ReactDOM.createRoot(container); // Creating a new root

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

Example of Legacy ReactDOM.render

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.

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.

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.

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:

Solution:

Ensure that the target container is a valid DOM node.

2. Replacing Legacy ReactDOM.render

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

3. Handling Unmounted Components

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

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

How ReactDOM createRoot Works

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.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root")); // GetElementById root

const container1 = document.getElementById("root1");
const root1 = ReactDOM.createRoot(container1);
root1.render(<App />);

const container2 = document.getElementById("root2");
const root2 = ReactDOM.createRoot(container2);
root2.render(<AnotherComponent />);

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from "react";
import { hydrateRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
hydrateRoot(container, <App />);

Target container is not a DOM element.

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

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container); // Creating a new root

root.render(<App />);

root.unmount();

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