What is Virtual DOM in React?

Question

Could someone tell me what is Virtual DOM in React?

Answer 1

DOM or Document Object Model is defined as the programming interface or API for HTML and XML. This helps in representing a web page as an object-oriented representation, that could easily be manipulated or modified using a scripting language (like JavaScript). The idea behind releasing Virtual DOM was because of the inefficiency that is rendered inside websites because of DOM. For example, if a web page contains some 10 items, and if you interact with the web page and make a slight adjustment in any one item. What the DOM will do next is, it will re-design the whole web page of 10 items, just to make a change in that one item, it will also redesign the other 9 unchanged items along with that. The effect of this is slower speed, and hampered performance.

Then the concept of Virtual DOM came into existence to solve the speed problem. What this Virtual DOM essentially does is that it will create a virtual list of whatever items that is present in a webpage, and will take a screenshot, before manipulation and after manipulation. Then both the screenshots are compared to find out the change, and will only change that particular element that was manipulated, keeping the rest all the same.

If you wish to train and get skilled in React, then enroll in React certification course, from Intellipaat. And also check out the React JS tutorial, and watch our YouTube video on ReactJS Course to get started.