Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will understand about Virtual DOM Working structure in ReactJS. We will analyse below topics to understand the Virtual DOM Concepts in ReactJS.
- What is Real DOM ?
- What Issues in Real DOM ?
- What is Virtual DOM?
- How Virtual DOM helps to solve issue?
- React Elements Vs React Components in Virtual DOM
- Real DOM Vs Virtual DOM
A famous quote about learning is :
” An investment in knowledge pays the best interest.”
So Let’s begin.
DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.
So, while HTML is a text, the DOM is an in-memory representation of this text.
“Compare it to a process being an instance of a program. You can have multiple processes of the same one program, just like you can have multiple DOMs of the same HTML (e.g. the same page loaded on many tabs). “
The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like
So, whenever we want to dynamically change the content of the web page, we modify the DOM:
document is an abstraction of the root node, while
removeChild are methods from HTML DOM API.
The HTML DOM is always tree-structured – which is allowed by the structure of HTML document. This is cool because we can traverse trees fairly easily. Unfortunately, easily doesn’t mean quickly here.
The DOM trees are huge nowadays. Since we are more and more pushed towards dynamic web apps (Single Page Applications – SPAs), we need to modify the DOM tree incessantly and a lot. And this is a real performance and development pain.
Consider a DOM made of thousands of
divs. Remember, we are modern web developers, our app is very Specific. We have lots of methods that handle events – clicks, submits, type-ins… A typical
jQuery-like event handler looks like this:
- find every node interested on an event
- update it if necessary
Which has two problems:
- It’s hard to manage. Imagine that you have to tweak an event handler. If you lost the context, you have to dive really deep into the code to even know what’s going on. Both time-consuming and bug-risky.
- It’s inefficient. Do we really need to do all this findings manually? Maybe we can be smarter and tell in advance which nodes are to-be-updated?
Once again, React comes with a helping hand. The solution to problem 1 is declaratives. Instead of low-level techniques like traversing the DOM tree manually, you simple declare how a component should look like. React does the low-level job for you – the HTML DOM API methods are called under the hood. React doesn’t want you to worry about it – eventually, the component will look like it should.
But this doesn’t solve the performance issue. And this is exactly where the Virtual DOM comes into action.
In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.
A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.
Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
How it helps
When you render a JSX element, every single virtual DOM object gets updated.
This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.
Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.
By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”
Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest of your list alone.
This makes a big difference! React can update only the necessary parts of the DOM. React’s reputation for performance comes largely from this innovation.
In summary, here’s what happens when you try to update the DOM in React:
- The entire virtual DOM gets updated.
- The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
- The changed objects, and the changed objects only, get updated on the real DOM.
- Changes on the real DOM cause the screen to change.
ReactElement Vs ReactComponent
When we are talking about the virtual DOM, it’s important to see the difference between these two.
This is the primary type in React. React docs say:
ReactElementis a light, stateless, immutable, virtual representation of a DOM Element.“
ReactElements lives in the virtual DOM. They make the basic nodes here. Their immutability makes them easy and fast to compare and update. This is the reason of great React performance.
What can be a
ReactElement? Almost every HTML tag –
Once defined, ReactElements can be render into the “real” DOM. This is the moment when React ceases to control the elements. They become slow, boring DOM nodes:
JSX compiles HTML tags to ReactElements. So this is equivalent to the above:
Once again – ReactElements are the basic items in React virtual DOM. However, they are stateless, therefore don’t seem to be very helpful for us, the programmers. We would rather work on the class-like pieces of HTML, with kind-of-variables and kind-of-constants – don’t we? And here we come to…
ReactElement is – ReactComponents are stateful.
We usually use
React.createClass method to define one:
Your HTML-like blocks returned from
render method can have a state. And the best thing is whenever the state changes, the component is re-rendered:
ReactComponents turned out to be a great tool for designing dynamic HTML. They don’t have the access to the virtual DOM, but they can be easily converted to ReactElements:
What makes the difference?
ReactComponents are great. They are easy to manage. But they have no access to the virtual DOM – and we would like to do as much as possible there.
ReactComponent is changing the state, we want to make as little changes to the “real” DOM as possible. So this is how React deals with it. The
ReactComponent is converted to the
ReactElement. Now the
ReactElement can be inserted to the virtual DOM, compared and updated fast and easily. How exactly – well, that’s the job of the diff algorithm. The point is – it’s done faster than it would be in the “regular” DOM.
When React knows the diff – it’s converted to the low-level (HTML DOM) code, which is executed in the DOM. This code is optimised per browser.
Real DOM Vs Virtual DOM
Now we can say about the difference between Real DOM and Virtual DOM that :
- Real DOM is a language-neutral interface allowing programs and scripts to dynamically access and update multiple objects like content, structure, and style of a document. while Virtual DOM is a collection of modules designed to provide a declarative way to represent the DOM for an application.
- The Real DOM represents the document as nodes and objects, while A virtual DOM object is a representation of a DOM object, like a lightweight copy.
- Real DOM updates Slow while Virtual DOM updates faster.
- Real DOM can directly update HTML, while Virtual DOM can’t directly update HTML.
- Real DOM creates a new DOM if element updates, while Virtual DOM updates the JSX if element updates.
- With Real DOM, DOM manipulation is very expensive, while DOM manipulation is very easy with Virtual DOM.
- Real DOM includes Too much of memory wastage, while Virtual DOM includes no memory wastage.
That’s all about in this article.
In this article, We understood about about Virtual DOM Working structure in ReactJS.
Thanks for reading ! I hope you enjoyed and learned about the Virtual DOM concepts in ReactJS. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING!!😊😊😊