The document explains the concept of the Document Object Model (DOM) and its virtual representation used in React called the virtual DOM. The virtual DOM is a lightweight copy of the actual DOM that allows for faster updates by avoiding direct manipulation of the UI. Changes in the component state lead to updates in the virtual DOM, improving performance in React applications.

1. WHAT IS
VIRTUAL DOM
IN REACT JS

2. WHAT IS DOM
DOM stands for ‘Document Object Model’.
In simple terms, it is a structured
representation of the HTML elements that are
present in a webpage or web-app. DOM
represents the entire UI of your application.
The DOM is represented as a tree data
structure. It contains a node for each UI
element present in the web document.

3. React uses Virtual DOM exists which is like a
lightweight copy of the actual DOM(a virtual
representation of the DOM). So for every object
that exists in the original DOM, there is an
object for that in React Virtual DOM. It is
exactly the same, but it does not have the power
to directly change the layout of the document.
Manipulating DOM is slow, but manipulating
Virtual DOM is fast as nothing gets drawn on
the screen.
WHAT IS VIRTUAL DOM

4. WORKING OF VIRTUAL DOM

6. In react, everything is treated as a
component be it a functional component or
class component. A component can contain a
state. Each time we change something in our
JSX file or let’s put it in simple terms,
whenever the state of any component is
changed react updates its Virtual DOM tree.
HOW VIRTUAL DOM HELPS REACT JS

7. CONTACT US
9212172602
WWW.CETPAINFOTECH.COM
D-58, Red FM Road, Sector 2, D Block,
Sector 2, Noida, Uttar Pradesh 201301