The Document Object Model (DOM) plays a crucial role in interactive web development. But what is DOM in React JS, and why is it so essential? When you’re working with React, the DOM in React is your interactive connection between the JavaScript code and the rendered website content. React utilizes the Virtual DOM to improve the efficiency of this connection.

1. Virtual Dom|Browser DOM What
are these in React Js?
What is DOM?
The Document Object Model (DOM) plays a crucial role in interactive web development. But
what is DOM in React JS, and why is it so essential? When you’re working with React, the
DOM in React is your interactive connection between the JavaScript code and the rendered
website content. React utilizes the Virtual DOM to improve the efficiency of this connection.
Fundamentally, the DOM is a platform- and language-neutral interface that allows scripts
and programs to dynamically access and update the content, structure, and style of a
document. It represents the structure of HTML documents, like a tree, where each branch
ends in a node, and each node contains objects. This structure is essential when you’re
working with JavaScript and frameworks like React, where the DOM React connection is key
to functionality.
The concept of the Virtual DOM in React JS comes into play as a lightweight copy of the
actual DOM. This ‘virtual’ version provides several advantages, as React Virtual DOM
enhances the efficiency of rendering changes to the user interface, making React a
standout choice for developers focusing on user experience.
What is DOM in React?

2. Document Object Model (DOM) is Javascript Client-Side API to represent and manipulate
Document (HTML/XML).
How does Javascript generate a Document Object model out of it? Every tag is a node. so
HTML, head, body, title, a, pare nodes, Except link and script tags are not considered as a
node. HTML will be the parent node and everything else will be children of the HTML.
So, the tree is generated as,
This is not how the Data Structure is stored in Javascript. Html is not a root node. JavaScript
has its prototype chain so Html is one node that is inherited from Object. Prototype so that
it gets the methods to calculate styles, properties, Manipulating the individual nodes.
Please go through the below picture you will get a better idea.
Now, If you can see the highlighted part is from where our HTML node starts forming a
tree. And we consider it as a DOM object. If you can see CSS style declaration is a sibling of
node/Html and that is why it is not present in the subtree of HTML as a parent.
As we know HTML/node is inherited from Object. Prototype and Dom will get many
methods to retrieve and manipulate the document object model. This is the reason we say
JavaScript is an untyped language that is used to make HTML dynamic.
What makes DOM manipulation slow?

3. Understanding what makes DOM manipulation slow is vital in identifying why solutions like
the Virtual DOM React uses are beneficial. Traditional DOM manipulation is known to be
resource-intensive. The problem stems from the fact that every small modification in the
DOM can cause the browser to recalculate CSS styles, layout, and render the page. These
recalculations can result in a significant performance hit, especially when complex
interactions or large data manipulations are taking place.
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?

4. 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.

5. 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

6. 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.
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

7. 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

8. 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.

9. ● Purpose: The Virtual DOM’s main purpose is to provide a performant way to update
the view, given the use of Virtual DOM in React JS. On the other hand, the Shadow
DOM provides style encapsulation and avoids style conflicts in the larger DOM tree.
Understanding how the Virtual DOM works in React Native and React JS, compared to the
Shadow DOM, underscores the versatility and diversity of tools available for managing and
interacting with the DOM in modern web development. Both serve unique purposes, and
their use depends largely on the specific needs and goals of your project.
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.
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

10. 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

11. 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.

12. ● Purpose: The Virtual DOM’s main purpose is to provide a performant way to update
the view, given the use of Virtual DOM in React JS. On the other hand, the Shadow
DOM provides style encapsulation and avoids style conflicts in the larger DOM tree.
Understanding how the Virtual DOM works in React Native and React JS, compared to the
Shadow DOM, underscores the versatility and diversity of tools available for managing and
interacting with the DOM in modern web development. Both serve unique purposes, and
their use depends largely on the specific needs and goals of your project.
Conclusion:
In React.js, the Virtual DOM and Browser DOM are two fundamental concepts that play a crucial role
in optimizing and enhancing the performance of web applications. The Virtual DOM is an abstract
representation of the actual browser DOM and serves as a lightweight copy of it. React leverages the
Virtual DOM to efficiently update and render components by performing a diffing algorithm, which
calculates the minimal changes needed to update the actual DOM. This approach minimizes
unnecessary re-renders and improves the overall efficiency of the application. On the other hand, the
Browser DOM represents the actual HTML structure of a web page and is responsible for rendering
and manipulating the content displayed to users. React's Virtual DOM acts as a mediator between
the components and the Browser DOM, allowing for efficient updates without directly interacting
with the real DOM. By employing this mechanism, React enables developers to build highly
interactive and responsive user interfaces, leading to better user experiences and smoother
performance.