Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started
← Back to Lessons
Edit on Github

React Createroot Vs Render

The ReactDOM CreateRoot function
ReactDOM.render is no longer used

The ReactDOM CreateRoot function

The React.createRoot function method should be the first function called on your React application. It replaces the older ReactDOM.render method (since React v18) and has several improvements that help make your application more efficient and responsive.

Here is the smallest possible React JS application and how you must use the createRoot function to begin using React:

1import React from 'react'; 2import ReactDOM from 'react-dom/client'; 3 4// Define a simple component that will be your entire React.js app (for now) 5const App = () => { 6 return ( 7 <div>Hello, World!</div> 8 ); 9}; 10 11// Create a root container and render the component 12const root = ReactDOM.createRoot(document.getElementById('root')); 13root.render(<App />);

createRoot is what connects react to The JS traditional DOM

The entire React.js is just a magic trick to make the developer's life easier, in reality, the only way to make dynamic websites with javascript is using the document object model, and it's really annoying to use it.

React still has to connect to the DOM before it can start doing its thing, the ReactDOM.createRoot method was created just for that; it binds your first ever react component (usually called <App>) to your first html div (usually with the id root).

You need a traditional and -almost- empty HTML website with at least one <div> tag with the ID root like this:

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Smallest React App</title> 7</head> 8<body> 9 <div id="root"></div> 10 <script src="index.js"></script> 11</body> 12</html>

And then you can call the ReactDOM.createRoot function using javascript like this:

1// Create a root container and render the component 2const root = ReactDOM.createRoot(document.getElementById('root')); 3root.render(<App />);

Note how the <App /> component is referenced as the first React.js component on this application.

Forget about the DOM forever

After calling the createRoot function, you don't have to care about The DOM ever again, you can create as many react js components as you need and reference them within the code, for example:

1const Card = () => { 2 return ( 3 <div>I'm a card</div> 4 ); 5}; 6 7// Your main App component 8const App = () => { 9 return ( 10 <div>Hello, World!</div> 11 <div>Here is the cars: <Card /></div> 12 ); 13}; 14 15// Create a root container and render the component 16const root = ReactDOM.createRoot(document.getElementById('root')); 17root.render(<App />);

ReactDOM.render is no longer used

In previous versions of react we used ReactDOM.render instead of ReactDOM.createRoot but that function is deprecated and not recomended any more. The switch was made since React v18 because the new function has way better performance and many other advantages like:

  • Better Resource Management: It helps React manage system resources more efficiently, ensuring that updates to your application are handled in a way that optimizes performance and responsiveness.
  • Improved User Experience: The method allows React to manage better how and when updates are displayed to the user, resulting in a smoother and more seamless experience.
  • Flexibility for Developers: Developers can now define which updates are urgent and which can be deferred, providing more control over the rendering process.

ReactDOM.render vs ReactDOM.createRoot

If we want to get technical, what makes createRoot a better function is its capacity to do concurrent rendering: Concurrent rendering allows React to work on multiple tasks simultaneously. It can start rendering an update, pause it if something more urgent comes up (like user input), and then continue the rendering process later. This non-blocking behavior helps keep the UI responsive.