Introduction React Virtual DOM

The problem with DOM manipulation

Using the 'Document' object you can access an object's structure, in order to change the proprieties of any objects within the DOM tree. The main problem with DOM manipulation is when any object gets updated, the DOM tree gets rebuilt entirely to display the changes. That affects the speed, performance, and obviously user experience negatively. So how can we manipulate the DOM in a more efficient way?

What is React Virtual Dom?

React.js introduces a new concept of DOM called Virtual DOM, a lightweight copy of each DOM object, which explains how React.js can deliver high-performing web apps. But how does this virtual Dom actually works?

How does Virtual DOM work?

When an object gets updated, React compare the Virtual DOM with the pre-update version, in order to figure out exactly which object has changed. In that way, React changes only the updated objects and leave the rest as it is. In other words, React Virtual DOM updates only the necessary part of the DOM tree.

Conclusion

As a React.js developer at Will & Skill, we really appreciate performance and speed. So we definitely appreciate React Virtual DOM. Any questions or suggestions? Get in touch by email or Instagram DMs.

Enjoyed this article? Consider sharing it.