A Journey through React Rendering

In the blocks of understanding necessary to get a model of React in our minds the concept of rendering is key. We are using the syntax of JSX to design our user interface and translating this into an output on the screen, this is rendering.

Now suppose in an HTML document you have <div id="root> </div>. We can use this to create our React application.

We call this the root DOM node. In fact applications build solely in React you usually only have one Root DOM node.

From the very simplest of building blocks of a React application we have elements, they are created in JSX which can be rendered on the page. As complexity gets higher we bundle elements into a component. That component becomes many and these components are usually held under one larger component which we inventively call ‘App’.

Everything we create with React gets managed insides this ‘root’ DOM node. Before we go down the rabbit hole of complexity, first we should understand how to render an element before talking about rendering components. We will get an understanding of what we mean by React managing everything inside this <div> element.

Rendering an Element

So we know that React has to translate JSX, into something that eventually will go on the screen. We call this rendering. React has a function called ReactDOM.render() which allows us to take a React element as an argument and where we want to put the code in the HTML. ReactDOM is a React library which has a bunch of functions that deal with the DOM.

The ReactDOM methods are used at the top of the application. It provides a way for code to escape through and be displayed onto the page. It is the primary gateway between React and the DOM.

Let’s see how this works

const element = <h1> Hello World </h1>
ReactDOM.render(element, document.getByElementId('root'))

Output on Screen

Hello World

Now we should know that a React element is immutable, it only provides a snapshot of a potential user interface at a time. You can imagine this is not really a way to make applications!

Lets talk through the render() function first. The parameters it takes are the following

1. React element
2. Selected DOM node to append to
3. Callback function (optional)

This selected DOM node acts as the root of the tree structure of all react elements. It is this structure which allows for multiple components which are viewed as children of the root React Element. Below is a diagram to show this.

Now it should be said that a render can be triggered by something happening inside a component as well as actually just displaying a static page on the screen. This ‘re-render’ could be a change that we want to occur on the webpage and that these re-renders can happen multiple times is the beauty of React. It allows for many changes to happen or data to be stored for eventual use without it being complicated.

To get from JSX to what appears on the screen. React renders a new virtual DOM and compares this against the old virtual DOM. A process called diffing which React calculates the differences between these virtual DOM’s. This then gets compared against the actual DOM and only changes that need to made to the DOM are made. This process is called reconciliation. We won’t get too deep into this in this article but just to have a high level overview of what rendering achieves.

Why use render() ?

Now we know what it does what can we glean from its use.

Single-page applications

You’ll have no doubt heard about single-page applications. React is well suited for this type of application. We can have an almost blank page of HTML where we can direct React to append the application within a div container as we explained above. React allows us to change things on the DOM multiple times without having to refresh the page. We do this by triggering a re-render in our React Application multiple times if necessary, updating the page the way we want it to. This gives us the ability to create dynamic content on a page without having to refresh it seamlessly. To fully understand this we have to delve into the concept of state, which won’t explore here!

Conclusion

ReactDOM acts as an interface between React, component Tree and the DOM. The most common function is the render() function. It acts as the go between React and the DOM.

Once the React root element and tree of children components have been rendered it is the reconciliation process that handles everything related to updates to the page. If we decide to update one of the child components then only changes within that component will take place.

Other Articles by Author

1. Why you should know about the Virtual DOM
2. Why should you care about how the Browser works in React
3. Why you should be using Fragments
4. Why the div in React

About the Author

I’m a practising medical physician and educationalist as well as a web developer. Please see here for further details about what I’m up to project-wise on my blog and other posts. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk or on Twitter @aaronsmithdev.