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

The Real DOM (Document Object Model) in ReactJS is the standard model for interacting with the structure of your web page. It is a tree-like representation of your HTML content that JavaScript can interact with, making dynamic changes to the visible layout and content. But the interaction with the Real DOM can be slow and inefficient, especially when there are frequent changes. That's where the Virtual DOM in ReactJS comes into play.

React introduces a Virtual DOM to optimize interactions and updates to the webpage. Instead of making direct changes to the Real DOM (which can be computationally expensive), React first makes changes to the Virtual DOM. But how many Virtual DOM in React exist? In reality, there are two Virtual DOM trees involved in this process at any given point: the current Virtual DOM and the updated Virtual DOM reflecting the new state after changes.

Difference between Virtual DOM in ReactJS and the Real DOM

Efficiency: The most crucial difference lies in the efficiency of updates. Direct changes to the Real DOM can be slow, particularly if they trigger page re-renders. React instead applies changes to the Virtual DOM and then uses a diffing algorithm to apply only necessary updates to the Real DOM, increasing performance.

Batch Updates: Another key difference is how updates are handled. The Real DOM updates immediately whenever a change is made, which can be costly in terms of performance. On the other hand, React batches multiple changes together on the Virtual DOM before applying them to the Real DOM, resulting in fewer actual DOM manipulations.

Memory Efficiency: The Real DOM resides in the browser's memory and gets directly affected by changes, whereas the Virtual DOM is a lighter-weight copy that resides in the application's memory, making changes less resource-intensive.

To fully understand what is the DOM in React, it's essential to comprehend both these aspects – the Real and the Virtual DOM. The addition of the Virtual DOM to ReactJS is a revolutionary approach to improving web app performance.

How is the Virtual DOM Different from the Shadow DOM?

Understanding the difference between the Virtual DOM and the Shadow DOM is an essential aspect of mastering modern web development. Each serves a unique purpose and provides different benefits. But before we delve into their differences, let's review how the Virtual DOM works in React JS and React Native and how it compares to the Real DOM in React JS.

In React JS, the Virtual DOM is a lightweight representation of the Real DOM. This virtual representation improves performance by reducing the amount of direct manipulation on the resource-intensive Real DOM. Instead of directly modifying the Real DOM (which can trigger costly page re-renders), the Virtual DOM batches multiple changes together and applies them all at once. This difference between the Virtual DOM and Real DOM in React JS is a key factor in why we use Virtual DOM in React.

Now, let's consider the Shadow DOM. The Shadow DOM is a web standard that enables encapsulation in the browser. It allows for the creation of a separate, isolated DOM tree attached to an element of the Real DOM, without affecting other parts of the DOM tree.

Difference between the Virtual DOM and the Shadow DOM

Scope: While the Virtual DOM represents the entire HTML document and is used for diffing and efficiently updating the Real DOM, the Shadow DOM is used to create an isolated DOM tree for a specific element, ensuring styles and scripts are scoped to that tree and do not leak out.

Implementation: The Virtual DOM is an application-level implementation used primarily in libraries like React JS and React Native, whereas the Shadow DOM is a browser technology built into the web platform.