Design Converter
Education
Last updated on Mar 6, 2025
•5 mins read
Last updated on Mar 6, 2025
•5 mins read
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.
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.
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.
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
createRoot is required for concurrent rendering.
The target container (a DOM node) is specified as an argument.
The root object is created once and reused throughout the React application lifecycle.
root.render() replaces ReactDOM.render(), improving rendering control.
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 |
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.
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.
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.
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.
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}
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 />);
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.
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.
Always use createRoot instead of ReactDOM.render.
Use a single root unless the same page requires multiple roots.
Ensure getElementById root is correctly defined before rendering.
Use React.StrictMode for better debugging and adherence to modern standards.
Properly handle unmounting of components to prevent memory leaks.
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.
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.