Home Reactjs Virtual Dom: Getting started with Virtual DOM | Real DOM

Virtual Dom: Getting started with Virtual DOM | Real DOM

3
385

React users must be aware of the term “Virtual DOM”. So, what is a Virtual DOM and where does it find its use in React.

Real DOM:

DOM stands for “Document Object Model”. DOM basically represents the UI of your application. 

Whenever a change is brought in the state of your application UI, the DOM gets updated. 

However, the frequent manipulation of the DOM affects the performance of the react application, making it slow. The DOM is represented by a tree data structure which makes the changes and updates on the DOM happen fastly.

After the change, the children nodes of the updated element as well as the updated element itself have to be rendered again to update the application UI making the application to work slow.

It is safe to say that the more the number of components you have in your application, the more time taking the DOM updates could be as need to be rendered again and again for every DOM update.

Virtual DOM:

Due to the re-rendering issues in the real DOM, the concept of virtual DOM comes into play and it was seen that it performed significantly better than the real DOM. In fact, the virtual DOM is only a virtual representation of the real DOM. People might wonder why there is any need for a virtual DOM when it has to do the same job as that of the real DOM, making us do twice as much work. Well, the truth is that the virtual DOM is much faster and efficient than the real DOM.

What is Virtual DOM?

DOM stands for Data Object Model and defines the logical structure of documents as well as the way it is accessed and manipulated. Besides facilitating a cross-platform feature DOM is also a language-independent interface that treats an XML or HTML document as a tree structure. DOM manipulation has become the core of today’s interactive web but unfortunately, it’s a lot slower than most JavaScript operations.

The slow operations of DOM are made worse by the fact that the JavaScript framework updates the DOM much more than that is needed. This inefficient updating has become a serious problem in modern websites. To minimize this problem, React popularised Virtual DOM to a great extent. In modern web development, DOM is crucial to understand. It is mainly used to create a Node using JavaScript

DOM is the heart of the modern interactive web.

It defines the structure of the document and the browser converts your webpage or their

document into DOM, which is the representation of the document as an object and it does that

because it can be manipulated or modified with your scripting language like JavaScript.

A JavaScript object is a “virtual” representation of the “real” DOM that defines the logical structure of documents and the way it is manipulated and accessed. But updating to a DOM involves a lot of processes other than just updating the DOM, which makes it slow. Thus React uses the Virtual DOM, which is an in-memory representation of the real DOM, instead of the real DOM.

What makes virtual DOM faster?

In the following image, we can see a virtual DOM is represented by a tree with each node representing an element on the tree. Whenever new elements are added to the UI. a virtual DOM is created. Whenever there is a change of state in any of these elements, a new virtual DOM tree is created.

Then this tree is compared with the previous virtual DOM tree. After all, this is done, the virtual DOM calculates the best possibility to make these changes to the real DOM ensuring that there is the need for minimum operations on the real DOM

The comparing process for the virtual DOM tree is shown in the image given below. The changed nodes are depicted by the red circles whose UI elements’ state has undergone changes. Now, the current virtual DOM tree is calculated, the whole parent subtree gets rendered again to produce the updated UI. This virtually updated tree is then batch updated to the real DOM.

What is React?

      • React is a JavaScript library for building interactive User Interface (UI) created by Jordan Walke, a software engineer at Facebook.
      •  It was first deployed on Facebook’s newsfeed in 2011 and later on instagram.com in 2012
      • It was further made open-sourced at JSConf US in May 2013. Facebook announced React Fiber, on April 18, 2017.
      •  React 360 V1.0.0. was released to the public on April 19, 2017.

 How does React’s virtual DOM work?

After getting a complete idea of what a Virtual DOM is and how it enhances your apps’ performance, let us have a look into how React uses virtual DOM.

The process by which React uses to work with virtual DOM is called “Diffing”. This is basically a comparison process which is discussed in detail further. Every UI piece in React is considered a component where each component has its unique state

React’s basic principle is to follow the observable pattern and to look for any state change. Whenever the state of any component changes, React updates the virtual DOM tree. After the virtual DOM has been updated, React then compares the updated version of the virtual DOM with the older version of the virtual DOM and the process is called “diffing”.

React updates only those objects in the real DOM which have been changed in the virtual DOM making the app performance much better than it would have been by directly updating it on the real DOM thereby making React as a high-performance JavaScript library.

What we’re doing here is just telling React which state we want our UI to be in and it makes sure that the DOM matches the state. All that the developers need to do is update the states of their components whenever needed and React takes care of the rest of the work. 

This is how a browser renders a page:

virtual dom

What makes React so fast?

 

Whenever anything changes in your application it gets view entered to the virtual representation of the DOM. As we know that reading from and writing to the DOM is slow compared to reading or writing from a JavaScript object. Virtual DOM is a JavaScript object, so react never reads from the real DOM. It interacts with the virtual DOM and when it sees the change, it goes ahead and updates the real DOM very efficiently and that’s what makes react very fast.

Why should we use react?

      • Updates and renders only the elements that change/update in the DOM{hence quick rendering)
      • Build encapsulated components that manage their own state.
      • React can even render on the server by using Node and strong mobile applications using react-native.

Getting started with virtual DOM:

The virtual DOM is a concept of programming where a virtual representation of the UI is kept in memory and later to be synced with the real DOM using a library such as ReactDOM. This is known as reconciliation. The virtual DOM solves these problems of frequent updates to the DOM in a more performant way. Unlike the DOM or the shadow DOM, virtual DOM is a new method of interfacing with the DOM instead of an official specification.

A virtual DOM is like a copy of the real DOM. The Virtual DOM, unlike the real DOM, can be frequently updated and manipulated, without the help of DOM APIs. Once the updates are made to the virtual DOM, we can consider what changes are needed in the original DOM and make them in an optimized and targeted way.

What does a virtual DOM look like?

The name “virtual DOM” tends to make the concept more mysterious than it actually is. A virtual DOM is rather just a regular Javascript object.

Given below is a DOM tree :

 

html

head lang=”en”

body

ul class=”list”

li class=”list__item”

“List item”

 

This tree can also be represented as a Javascript object.

const vdom = { tagName: "html", children: [ { tagName: "head" }, { tagName: "body", children: [ { tagName: "ul", attributes: { "class": "list" }, children: [ { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item" } // end li ] } // end ul ] } // end body ] } // end html 

We can consider this object as the virtual DOM. Just like the real DOM, it is an object-based representation of our HTML document. As it is just a Javascript object, we can manipulate it frequently without making any changes to the actual DOM until last.

In place of using a single object for the entire object, it is more common to work with little sections of the virtual DOM.

const list = { tagName: "ul", attributes: { "class": "list" }, children: [ { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item" } ] }; 

Batch Update:

It is the mechanism by which React updates the real DOM thereby enhancing the performance. However, instead of changing updates for every single change in the state, the updates to the real DOM are sent in batches.

Conclusion:

We see how Virtual DOM can easily solve the problem of frequent framework updates to the DOM. Virtual DOM is definitely a feature to boast on the main page as it aids fully in the high performance of React. Updating the Virtual DOM of ReactJs is faster because React uses efficient algorithms, batched updates, update the subtree only, and use of observables to detect changes. Virtual DOM is a must to provide performance applications to users that need frequent updates and it additionally comes with tools that are purely open source.

3 Comments

  1. […] In the above example, we are passing a function as props to the child component. This function is getting invoked from the child component whenever the input value changes. When the value inside the input box is changed this callback function gets invoked and passes the value of the input box to the function as an argument. In this way we are passing value from a child component i.e input box in this case to the parent component and this value is eventually used in the parent to update the state and render the updated input value to the DOM. […]

Leave A Reply

Please enter your comment!
Please enter your name here