Tag: Virtual DOM

ReactJS – How is Virtual DOM Valuable For React Performance?

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.


Real DOM

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 getElementById or removeChild. We usually use JavaScript language to work with the DOM, because… Well, nobody knows why :).

So, whenever we want to dynamically change the content of the web page, we modify the DOM:

#!javascript
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);

document is an abstraction of the root node, while getElementById, parentNode and removeChild are methods from HTML DOM API.


Issues

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:

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


Virtual DOM

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.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

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:

  1. The entire virtual DOM gets updated.
  2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
  3. The changed objects, and the changed objects only, get updated on the real DOM.
  4. 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.


ReactElement

This is the primary type in React. React docs say:

” A ReactElement is 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 – div, table, strong.

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:

#!javascript
var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));
// If you are surprised by the fact that `render` 
// comes from `ReactDOM` package, see the Post Script.

JSX compiles HTML tags to ReactElements. So this is equivalent to the above:

#!javascript
var root = <div />;
ReactDOM.render(root, document.getElementById('example'));

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…


ReactComponent

What differs ReactComponent from ReactElement is – ReactComponents are stateful.

We usually use React.createClass method to define one:

#!javascript
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

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:

#!javascript
var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

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:

#!javascript
var element = React.createElement(MyComponent);
// or equivalently, with JSX
var element = <MyComponent />;


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.

Whenever a 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 is an object-oriented representation of a web page, modified with a scripting language like JavaScript , while Virtual DOM is ideal for mobile-first applications.
  • 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.


Conclusion

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!!???

Exit mobile version