A Closer Look at ReactDOM.render - The Need to Know and More

. Along with this, we will also take a closer look at the 

 library is not often talked about when working with React, however, It is vital for any React developer to know how 

 is used to inject our React code into the DOM. It is also good to get a brief idea of how it works under the hood, so we can write better code to accommodate the architecture.

 package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.

By the end of this blog post, you will hopefully know more about:

This blog post presents an overview of the ReactDOM library. Since it involves some core ReactJS concepts, 

it is better to be familiar with the library 

Even if you don't have a deep understanding of React, this blog post can help demystify a lot of concepts related to rendering on the DOM.

Before moving to ReactDOM, let's take a brief look at the Document Object Model.

The Document Object Model (DOM) is a code representation of all the webpages that you see on the internet. 

, such as a button or image that you see on the web-page is a part of a hierarchy of various elements within a tree structure. This means each element (except the root element) is a child of another element. This structure enables you to easily interface your JavaScript code with HTML to create highly powerful and dynamic web applications.

The way that web developers usually work with the DOM to develop interactive websites, is by finding a DOM node and making the required changes to it, such as changing an attribute or adding a child node. 

However, for highly dynamic web applications where the DOM needs to be updated frequently, applying these required changes can be a slow process, as the browser ultimately has to update the entire DOM every time. To combat this problem, React works with a 

 that is used behind the scenes to optimize the update process. 

When a React element is updated, ReactDOM firstly updates the Virtual DOM. After that, the difference between the actual DOM and the Virtual DOM is calculated, and 

. This means that the whole DOM does not need to be updated every single time.

, is one of the things that helps us to build blazing fast Single Pages Applications (SPAs) with React.

ReactDOM is a package that provides methods that can be used to interact with the DOM, which is needed to insert or update React elements. It provides many helper functions such as:

Most of the time when building Single Page Applications (such as with 

), we usually create a single DOM container and call the render method once to initialize our React application. Since this method is always used when working with React, learning about the working of 

 can greatly benefit us as React developers.

The render method can be called the primary gateway between React and the DOM.

Let’s say you have defined a React element (

), as well as a DOM node to act as a container for that element (div with the ID of “container”). Now, you can use 

 to render the element within that container using the syntax given below:

 />, document.querySelector("#container"))

 If the Calculator component has already been mounted in the div element, calling this again will simply update the DOM based on the difference between the components.

The statement above returns a reference to the component that you have created. If it is a functional component, it returns null. 

 as it may not be useful when future versions of React render components asynchronously.

 ReactDOM.render requires a React element as the first argument. React elements are generated through 

. Therefore, you may use that syntax or simply invoke a JSX interpretation of the component to get the parameters in the correct format for the arguments. Using 

, our code can be modified to look like this:

. This means each element is essentially a child of another React element. However, for the root element, we need to create an element (DOM Node) in our HTML code to act as a container for our React element tree, which can be accessed via 

For a better understanding, the figure below defines an example React component tree:

, which is rendered into the container div within the HTML code.

This is what those components will look like in code:

function Calculator() {
  return (
    <>
      <Display />
      <KeyPad />
    </>
  );
}

function KeyPad() {
  return (
    <>
      <NumKeys />
      <FunctionalKeys />
      <Operators />
    </>
  );
}

Reconciliation & The React Fiber Architecture:

 to use React. The learning outcome of this section is to understand briefly the inner workings of React and it’s architecture, and to demystify the black box that is the reconciliation process. It can be beneficial to you if you plan to contribute to the library.

As defined above, the reconciliation process is when the React virtual DOM (AKA the tree of React elements) is checked against the actual DOM, and only the necessary updates are reflected.

In the previous versions of React, a linear synchronous approach was used to update the DOM. It became obvious very quickly that this can greatly slow down our UI updates, negating the whole reason why reconciliation exists in the first place.

In React 16, the team re-wrote major parts of the reconciliation algorithm to make it possible to update the DOM asynchronously. This is possible because of the Fiber architecture which lies at the core of the new implementation.

This phase is triggered when a component is updated through state or props. Therefore, the standard React protocol is followed, where a component is updated and lifecycle hooks are called, after which the DOM nodes that need to be updated are calculated. In Fiber, these activities are termed as 

Before React 16, having multiple work tasks could make our user interface look and feel sluggish because 

 with the call stack. The problem with recursion is, that the process only stops when the call stack is empty, which can result in higher time complexity.

As more work is performed, more computational resources are utilized. The updated architecture utilizes the 

 within its algorithm to handle updates. This, used in conjunction with the 

 function provided by newer browsers makes it possible to perform asynchronous tasks (or work) more efficiently.

. The algorithm starts from the top of the Fiber Node Tree and skips nodes until it reaches the one which was updated. Then it performs the required work and moves up the tree until all the required work is performed.

During the commit phase, the algorithm first calls the required lifecycle methods before updating or unmounting a component. Then, it performs the actual work, that is, inserting, updating or deleting a node in the DOM. Finally, it calls the post-mutation lifecycle methods 

Along with this, React also activates the Fiber Node Tree that was generated in the previous phase. Doing this ensures synchronization between the tree of React elements and the DOM, as React knows what the current status of the Virtual DOM is.

 however abstract, we now have a faint idea of how the reconciliation process works behind the scenes.

Let’s move back to the practical side of things, and discuss how we can use 

Assuming we are working with a Single Page Application, we will only need to instantiate the root element (usually 

) at a single location in the DOM. Therefore, oftentimes the lone 

All we need to do is create a container, and render our React root element to it, as described above in the Calculator example.

Integrating the React Component tree in any website:

We can also use ReactDOM.render to integrate React in a different application. 

This is why we call React a library, not a framework

. You can use it as little as possible or as much as possible, as it completely depends on your use-case.

We can create a wrapper function for our React module. All the required props can be passed to the function, and sent down to the component which is rendered through ReactDOM.render, just like it would be for a single page application.

import ReactDOM from "react-dom";
import React from "react";

const displayCalculator = ({ height, width }, DOMNode) => {
  ReactDOM.render(<Calculator height={height} width={width} />, DOMNode);
};

module.exports = displayCalculator;

It is important to export the function, as we will need to call it within our JavaScript code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <meta http-equiv="x-ua-compatible" content="ie=edge" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />

    <title>React Calculator</title>

    <script src="react-calculator.js" type="text/javascript"></script>

    <script>
    	function initReact() {
          const props = { height: 500, width: 500 };

          showCalculator(props, document.querySelector("#container"));
        }
    </script>
  </head>

  <body onload="initReact()">
    <div id="container"></div>
  </body>
</html>

 file shown above, we are importing the script that renders our root React component, and then we call the function using plain JavaScript. We can also pass parameters, such as props for our React component, through this function. It is better to initialize React components after the document has loaded.

 multiple times throughout the application. This means that if you are creating a new website, or modifying an existing website that does not use React yet, you can use 

 to generate some pages using React, while others do not use the library.

When you unmount a React component from the DOM, it is important to call 

 according to the syntax given below to ensure there are no memory leaks.

🔘 It is up to you, the developer, to decide when it is time for clean-up.

 for your React root elements. Doing this ensures that you can mount and unmount React nodes according to the design of your website. For example, moving from one React page to another that uses separate React root elements, it is possible to integrate the wrapper API with the page transition, which can automatically unmount the component for you.

Similarly, you can also write the logic in your wrapper to unmount a React root component within the same page, as soon as its work is done.

Updating a Component with ReactDOM.render():

To update a component, you may call ReactDOM.render again for the same React element and DOM node. However, one thing that is important to note is that 

 completely replaces all of your props each time this function is called.

This means, you must also pass all of the other required props to the element that you are rendering, which can be an issue. The reason for the props being replaced is because React elements are immutable. The React team explains how you can 

create a wrapper to set the previous props again

 is the most commonly used ReactDOM method, there are a few more available at your disposal. Let’s take a look at two of those.

, however, it is used when rendering pages through 

. It integrates the necessary event handlers and functions to the markup that has been generated.

Portals can be created to render a component 

 of that specific component. This can be highly useful to generate elements somewhere unrelated on the page.

To sum it up, ReactDOM acts as a powerful interface between our React component tree and the DOM. The most commonly used method from ReactDOM is 

, which can be used to connect entire React applications to the DOM.

Once the React element and it’s child tree have been inserted into the DOM, the reconciliation process handles everything related to updates. Due to this process, whenever we update a part of our component tree, only the changes in that part are reflected in the actual DOM, thereby saving us a lot of extra computation.

React and ReactDOM provides powerful functions such as 

 that make it easy to create fast and snappy Single Page Applications through React, which makes React such a popular front-end development library.

AUTHOR

Kumail Pirzada

📰 In this post, we will learn about render(), a core function of ReactDOM. Along with this, we will also take a closer look at the reconciliation process, how ReactDOM works under the hood, and it's use-cases.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

A Closer Look at ReactDOM.render - The Need to Know and More

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript