ReactDOM Render vs. createRoot: Key Differences Explained

React, one of the most popular JavaScript libraries, has evolved significantly. Among the most noteworthy updates is the introduction of ReactDOM.render and ReactDOM.createRoot. Understanding the differences between these two methods is essential for React developers, as it impacts how we render components and interact with the DOM.

This blog dives into the technical nuances of ReactDOM render vs. createRoot, explaining the key differences, their use cases, and how they relate to React's concurrent rendering capabilities.

ReactDOM Render: The Conventional Technique

Historically, ReactDOM.render was the primary method for rendering a React component to the DOM. This approach has been the staple for rendering React applications for many years. It allows you to inject a React component into a given DOM element, essentially managing the update cycle of your UI when state changes.

Here is an example of using ReactDOM.render in a traditional React application:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4
5// Select the DOM node where the app will render
6const rootElement = document.getElementById('root');
7
8// Render the App component inside the root element
9ReactDOM.render(<App />, rootElement);

​

How Does ReactDOM.render Work?

• The ReactDOM.render method takes two arguments:

1. A React, typically a root component, defines the app's structure.

2. A DOM element, where the component will be rendered, is referred to as the root container.

• It works synchronously and commits the DOM updates immediately, making it less optimized for handling more complex UI interactions, particularly when large or multiple components must be re-rendered.

• The render method operates on a given DOM element and binds React’s virtual DOM to that element. It then compares the virtual DOM to the real DOM and applies updates accordingly, using the diffing algorithm.

Despite being functional, ReactDOM.render has limitations. It does not fully support React’s Concurrent Mode, which is a technique to improve rendering performance and the ability to handle user input more effectively.

ReactDOM.createRoot: The New Root API

Introduced as part of React 18, the createRoot method improves ReactDOM.render, especially regarding performance and handling concurrent rendering. This new root API is designed to be a more flexible and performant way of mounting a React component to the DOM, enabling features like concurrent rendering and automatic batching of updates.

Here’s an example of using ReactDOM.createRoot:

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4
5// Create a new root for the app to mount to
6const rootElement = document.getElementById('root');
7const root = ReactDOM.createRoot(rootElement);
8
9// Render the App component inside the new root
10root.render(<App />);

​

Key Features of createRoot

• Concurrent Mode: By default, createRoot enables features like concurrent rendering. This allows React to work on multiple tasks simultaneously, improving the application's overall responsiveness by rendering updates in the background without blocking the main thread.

• Better Performance: The new root API provides better support for large React applications by allowing the React DOM client to manage updates more efficiently. With createRoot, React batches DOM updates and reduces unnecessary re-renders.

• Automatic Batching: Automatic batching is a significant improvement that reduces unnecessary updates. With createRoot, React can batch multiple updates into a single render cycle, resulting in fewer reflows and repaints in the DOM.

How createRoot Works

• The createRoot method is called on a particular DOM element, typically a root container, to initialize the new root.

• It references the newly created root, which is then used to render the component to the DOM.

Unlike the older render method, the new root API allows for more flexible interaction with the DOM and React’s internal rendering mechanisms. This method is ideal for modern React applications, especially those leveraging React’s concurrent rendering features.

ReactDOM Render vs. createRoot: Key Differences

1. Rendering Process

• ReactDOM.render: It is a traditional and synchronous method for rendering components. Each update triggers a complete re-render, which might not be the most efficient way when handling multiple updates.

• ReactDOM.createRoot: Supports concurrent rendering by allowing React to pause and resume rendering work, making updates more efficient, especially in complex or large applications.

2. Concurrent Mode Support

• ReactDOM.render: Does not natively support concurrent rendering, making it difficult to handle complex UI interactions without blocking the main thread.

• ReactDOM.createRoot: Fully supports concurrent rendering, enabling React to schedule updates and prioritize rendering work based on the user’s input and other conditions. This allows for smoother interactions and better performance in modern applications.

3. Performance Improvements

• ReactDOM.render: While functional, it doesn’t take advantage of the optimizations that come with concurrent rendering.

• ReactDOM.createRoot Leverages automatic batching, so React can make fewer DOM updates, improving your app's overall performance.

4. Code Migration and Compatibility

• ReactDOM.render: Works well with previous versions of React (React 16 and earlier).

• ReactDOM.createRoot: Is the preferred method for new React applications. It requires upgrading to React 18 or later.

5. API Differences

• ReactDOM.render: Accepts a second argument for the DOM element directly, rendering the component to that specific node.

• ReactDOM.createRoot: Requires creating a new root container before rendering, allowing better flexibility with concurrent rendering and component updates.

Practical Example: Comparing ReactDOM.render and createRoot

Let’s compare how ReactDOM.render and createRoot can affect rendering performance and user interactions:

Imagine you have a simple React app where a user clicks a button to toggle the visibility of a DOM element:

Using ReactDOM.render:

1ReactDOM.render(
2  <button onClick={toggleVisibility}>Toggle Visibility</button>,
3  document.getElementById('root')
4);

​

Using ReactDOM.createRoot:

1const root = ReactDOM.createRoot(document.getElementById('root'));
2root.render(
3  <button onClick={toggleVisibility}>Toggle Visibility</button>
4);

​

In the createRoot approach, React automatically batches DOM updates, which means updates happen more efficiently and lead to smoother user interactions.

Wrapping Up: Choosing the Right Method

In the battle of ReactDOM render vs. createRoot, ReactDOM.createRoot is the clear winner for modern React applications. The new root API offers better support for concurrent rendering, improved performance, and a smoother experience for users interacting with the app. React developers should consider migrating to createRoot to take full advantage of these advancements, especially when working with large-scale React applications or using React 18 and above.

Whether you’re maintaining a legacy app or building a new one, understanding when and how to use ReactDOM.render and createRoot is crucial for optimizing your app’s performance and handling user input efficiently.

In summary, the primary distinction between these two methods lies in their support for concurrent rendering, performance improvements, and handling of DOM updates. ReactDOM render works fine for simple applications, but createRoot is the future-proof solution for React applications that aims to deliver the best possible user experience.

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.