To address this problem, the people at React popularized something called thevirtual DOM.

The Virtual DOM

Here is a refresher of what happens behind the scenes inThe Virtual DOM.

In React, for everyDOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is arepresentationof 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 been updated, then React compares the virtual DOM with a virtual DOMsnapshotthat was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures outexactly 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 therealDOM.
• Changes on the real DOM cause the screen to change.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'