How does ReactJs use VDOM for better performance

The Virtual DOM

How does React solve the issue of slow DOM? By creating something called a virtual DOM. The virtual DOM is React’s own internal draft of the DOM. Here’s how it makes updating the real DOM so much faster:

1. React Creates its own Virtual DOM

When we create React elements with React.createElement() we’re actually creating new elements on the virtual DOM. Not the real DOM. That’s why we invoke the React library to create these elements instead of coding them directly into our HTML.

Using our JSX or JS instruction, React creates a virtual DOM to our exact specifications. Again, this virtual DOM is React’s own copy of the DOM. Creating and updating this virtual DOM is substantially faster than updating the actual DOM, because it does not require communication with the browser.

2. React Compares the “Actual” DOM to its Virtual DOM

After crafting its own virtual DOM, React then compares it to the “actual” DOM in the browser, taking note of all differences between the two.

3. React Calculates Changes

It then automatically calculates the least number of changes necessary to update the actual DOM to match its virtual DOM. This process is known as reconciliation.

4. React Updates Actual DOM

React then updates the real DOM to match the virtual DOM only once, with the least number of necessary changes it has just calculated. This is much faster than calling the DOM multiple times, making each small change individually.

5. Repeat

This process repeats as the user interacts with the application. React continues to update its own virtual DOM as users complete actions that warrant updates to the user interface.

Reconciliation in Action

Because reconciliation and the virtual DOM are so paramount to React, let’s review the steps one more time. Specifically, in the context of our own application. Consider what we saw in the last lesson:

live-updating-react-clock-in-browser

1. React Creates its own Virtual DOM

Our application’s liveTime() method looks like this:src/index.js

function liveTime() {
  var greeting = React.createElement('h1', {}, 'Hello, World!');
  var clock = React.createElement('h2', {}, `It is ${new Date().toLocaleTimeString()}`);
  var app = React.createElement('div', {}, greeting, clock);

  ReactDOM.render(
    app,
    document.getElementById('react-app-root')
  );
}

setInterval(liveTime, 1000);

It redefines both the clock and greeting elements (housed in common parent, app) every time it’s called. And setInterval() currently calls liveTime() each second. Within this method we use React.createElement() to craft React elements in the virtual DOM.

2. React Compares the “Actual” DOM to its Virtual DOM

When new elements are created in the virtual DOM with React.createElement(), React automatically compares its own virtual DOM to the actual DOM in the browser, taking note of all differences. In our case, the only real difference should be the value of clock, since one second will have passed since the last time we rendered clock.

3. React Calculates Changes

The reconciliation process automatically calculates the least number of changes necessary to update the actual DOM to match its virtual DOM. In our case, only clock has changed, so only clock actually needs to be updated, even though we’re explicitly redefining greetingtoo.

4. React Updates Actual DOM

React updates the real DOM with the minimal number of changes it has just calculated. In our app it only updates clock, because it recognizes that greeting in the virtual DOM already matches greeting in the actual DOM.

5. Repeat

We can observe this entire reconciliation process each second, every time liveTime() is called in our application.

Uday Ogra

Connect with me at http://facebook.com/tendulkarogra and lets have some healthy discussion :)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *