Every javascript framework needs to render the UI code as fast as possible. React is no different; we will find out why it is so efficient and fast. Understanding the concepts of virtual DOM, ReactDOM, will give you more confidence as a react developer. It will also help you to decide when to use React.

What is Rendering in web development?

There are two things in web development: the data (such as the list of users or products), and the template (the layout or view). A framework aims to dynamically inject the data into the template and produce HTML output for the browser. This process takes some time (a few milliseconds) due to the framework’s conditional logic and processing. It’s known as rendering.

In our case, React is the framework, and JSX code is the template where it injects data inside the curly braces <h1>{data}</h1>. React renders it efficiently to the web page using Virtual DOM and the ReactDOM Library.

Need for a Virtual DOM

The efficiency of React is due to its Virtual DOM. React never manipulates the actual browser DOM. Most of the time, DOM operations are expensive(slow, as it requires more computation).

If React had to change the real DOM for every tiny change to a component, it would be much slower in performance. The generation of DOM tree nodes, mounting a DOM node, updating or removing them takes too much time, especially when a framework frequently needs to do so.

The React team came up with a smart idea to maintain a virtual DOM for any data and state changes. Frequent changes are maintained in the Virtual DOM, and only changes that differ in the real DOM are updated.

React Virtual DOM

React works with the virtual DOM directly for most purposes as real DOM is slow. The Virtual DOM is faster than the whole DOM because it represents react elements in a lightweight JavaScript object format, instead of a tree structure.

Below is how the virtual DOM works:

It selectively updates only the necessary changes to the DOM in a clever way.

React vs. React DOM

React is just a UI library. It allows us to use state, props, and compose components. React keeps the data and UI in sync. Any changes that happen to the data due to user interaction or event will cause an update the UI.

We don’t have to touch or do anything with the DOM. It is handled and managed in the most efficient way behind the scenes. Now, React is meant to be a reusable library, and its documentation says: “Learn Once, Write anywhere”. This is why React can be used to build web apps and native mobile apps.

By keeping the core React library separate from the rendering code, only the rendering logic needs to be rewritten for different platforms like web or mobile.

This is also the reason why we need to import React DOM separately for rendering our App component.

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render( <App /> , document.getElementById('root');

Using the ReactDOM.render() method, we can render our react components to the web page. The signature of the method is:

ReactDOM.render(Component/JSX element to render, parent DOM node to mount the element)

Today we have React DOM for web, React Native for mobile, and even React 360 for building VR apps.

Conclusion

The react app that we build works due to Core React, Virtual DOM, and React DOM behind the scenes. Virtual DOM is the main reason why react is so efficient and fast. These are also the principal benefits of using React.