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

However, this is where the concept of the Virtual DOM in React steps in. React's Virtual DOM allows for a more efficient update process. Instead of making direct changes to the browser DOM, changes are initially made to the Virtual DOM in React. React then uses efficient diffing algorithms to determine the minimum number of changes necessary to update the actual DOM. By batching multiple changes together, React avoids the costly overhead of multiple direct manipulations of the Browser DOM.

This approach, adopted by the Virtual DOM React JS uses, helps optimize performance and leads to smoother, faster updates in the user interface. So when it comes to understanding what is DOM in React JS, it's equally important to appreciate the ingenious solution that the React Virtual DOM provides to slow DOM manipulation.

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.

Now, How does Virtual DOM work?

Whenever a Document Object Model is rendered into a browser React generates a copy of that object as a Virtual DOM.

When the user interacts and we want to change the Document Object Model, first we generate another copy of it.

We compare virtual DOM vs another copy of it, if there are changes then only we will render the Browser Document Object Model, otherwise, we won't.