⚛️ Visualization of Virtual DOM in React Js🔥
Let's know about Virtual Dom and how it will differ from Actual DOM
If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is a Virtual DOM, and why does React use it?
Lets start with one meme which most of them relate with
The above picture will have mixed feelings, no worries even though we start with any framework there will be a backtrack and opportunity to learn javascript. So let’s start with DOM and we jump into Virtual DOM
Document Object Model (DOM)
What is DOM ? 🤔
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
- The DOM represents the document as nodes and object
- It helps Connects Javascript to HTML
Representation:
Each node on the tree 🌲 is an object representing an HTML element.
Virtual Document Object Model (V-DOM)
What is Virtual DOM ? 🤔
A Virtual DOM object is a lightweight representation of the actual DOM object that exists in memory. This serves as a backbone for React for all DOM processing.
Why Virtual DOM?
Any operation/manipulation which is done directly in the DOM makes the entire DOM re-render which is proven to be too costly and that is where Virtual DOM is used which takes a copy of the actual DOM and does manipulation on that copy and replaces only that particular objects to the real DOM.
Let's jump into Visualization of DOM and Virtual DOM
DOM Visualization 👀
Here the sample HTML file which displays the current time and its respective DOM rerenders
The above gif is captured on the Elements tab after running the above HTML code.
There we can clearly see that Actual DOM updates the entire DOM from the root element
Virtual DOM Virtualization 👀
The above gif is captured on the Elements tab after running the above js code.
There we can clearly see that Virtual DOM updates only the changed element
