Virtual Dom|Browser DOM What are these in React Js?

These two aspects together – the role of the DOM and the benefit of the Virtual DOM – are what makes React JS such a powerful tool for web development.

If Document Object Model is so cool, then why go with Virtual DOM?

Although you have all the methods to change the DOM tree it comes with a lot of costs. If you want to change some child nodes. Javascript has to repaint the window with margin, padding, color, etc. properties. Document object model knows how to re-render the page but it is not so intelligent to keep track of each node and change only the node which is changing.

Let's take an example,

You have asked to decorate the room with 100 balloons. You have decorated the room with 100 balloons.

Now your mentor told you the color of each balloon should be red. so you remove all the balloons and now decorate the room with red balloons.

The mentor comes and asks you now change balloon no 90 with a blue-colored balloon. now you remove all balloons and bring 99 red balloons and 1 blue balloon and paint accordingly.

The mentor comes and asks please change balloon no 80 to green. You remove all the balloons. Go market bring 98 red, 1 blue, 1 green. And decorate the room accordingly.

WOW, will you work this way? No. right? but your Document Object Model does. So, how to make DOM intelligent?

Now, VIRTUAL DOM comes to rescue us.

What is the Virtual DOM in React JS?

It is a React's Object that represents the Browsers DOM, Which is intelligent to make changes in the DOM with the help of the Diff Algorithm. Few Blog says, it is so fast that it can produce 20000 nodes per second.

For every DOM object, there is a React Virtual DOM object. In simpler terms, virtual DOM in React JS is like a lightweight copy of a DOM object.

Are you wondering how is virtual dom in react js different from real DOM? React Virtual DOM has properties the same as real DOM object. However, it lacks the power to change the screen immediately.

Further, DOM manipulation is slower. Virtual DOM in React JS supports faster manipulation. This is because it doesn't let anything be drawn on the screen. In layman's terms, instead of moving actual rooms in a house, you edit the blueprint.

Pros and Cons of Virtual DOM

In the web development world, the concept of the Virtual DOM in React JS has sparked a significant conversation about efficiency and performance. Before diving into the pros and cons, let's first address the question – what is Virtual DOM in React JS?

Virtual DOM in React JS is a lightweight copy or 'virtual' representation of the actual DOM. This concept introduces a high-performance algorithm for syncing updates between the Virtual DOM and the Real DOM, making React Virtual DOM vs Real DOM a fascinating comparison.

Understanding the Virtual DOM begins with asking, "Where is Virtual DOM stored in React?" React creates this Virtual DOM in its memory. Every time a component's state changes, a new Virtual DOM tree is created. This new tree is then compared with the previous tree, a process known as diffing. React then smartly updates the Real DOM, applying only the differences identified during the diffing process.

Now let's delve into the advantages and drawbacks of this approach.

How is the Virtual DOM Different from the Real DOM?

When we talk about React, the conversation inevitably turns to the Virtual DOM in ReactJS and how it differentiates from the Real DOM. If you're wondering what is Real DOM in React JS, let's begin with a brief introduction.