What is Virtual DOM?
What is the virtual DOM?
The virtual DOM is an in-memory representation of the real DOM elements generated by React components before any changes are made to the page.
It’s a step that happens between the render function being called and the displaying of elements on the screen.
A component’s render method returns some markup, but it’s not the final HTML yet. It’s the in-memory representation of what will become real elements (this is step 1). Then that output will be transformed into real HTML, which is what gets displayed in the browser (This is step 2).
So why go through all this to generate a virtual DOM? Simple answer — This is what allows react to be fast. It does this by means of virtual DOM diffing. Comparing two virtual trees — old and new — and make only the necessary changes into the real DOM.
Source from my blog Intro To React #2
Let's take an example — though a very naive one: If you have something messed up in a room in your home and you need to clean it, what will be your first step? Will you be cleaning your room which is messed up or the whole house? The answer is definitely that you will be cleaning only the room which requires the cleaning. That's what the virtual DOM does.
Ordinary JS traverses or renders the whole DOM instead of rendering only the part which requires changes.
So whenever you have any changes, as in you want to add another <div> to your DOM then the virtual DOM will be created which actually does not do any changes in the actual DOM. Now with this virtual DOM, you will be checking the difference between this and your current DOM. And only the part which is different (in this case the new <div>) will be added instead of re-rendering the whole DOM.
React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React.div object that contains a React.ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.
You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.
A virtual DOM(VDOM) is not a new concept: https://github.com/Matt-Esch/virtual-dom.
VDOM is strategically to update DOM without redrawing all the nodes in a single page application. Finding a node in a tree structure is easy but the DOM tree for a SPA app can be drastically huge. Finding and updating a node/nodes in case of an event is not time efficient.
VDOM solves this problem by creating a high level abstraction of actual dom. The VDOM is a high level lightweight in-memory tree representation of actual DOM.
For example, consider adding a node in DOM; react keep a copy of VDOM in memory
- Create a VDOM with a new state
- Compare it with older VDOM using diffing.
- Update only different nodes in real DOM.
- Assign new VDOM as an older VDOM.