Virtual DOM in React JS

Virtual DOM in React JS.

In this chapter, you will learn about what is virtual DOM in React JS and how does react updates the DOM in the browser. The render method is not about rendering the component to the DOM, instead of how our HTML should look like.

VDOM: Virtual Document Object Model
DOM: Document Object Model

1. When the render method is being called it does not immediately update the real DOM, instead, react makes a comparison between the previous virtual DOM and re-rendered DOM.
2. React compares the old virtual DOM with the newly created DOM, it checks if there are any differences in the DOM copies.
3. If react detects any differences then it updated the real DOM, even though it never render the entire real DOM, instead, it only updates where differences were detected. Consider an example, we have a product slider div which shows the product images, when images get updated, then react makes changes in the images instead of re-rendering the entire product slider div.
4. If no differences were found, then the react keeps real DOM as it is.

React keeps two copies of the DOM namely old virtual DOM and re-rendered DOM. Now let’s see what is virtual DOM and real DOM.

What is a virtual DOM?
Virtual DOM is a DOM representation of UI in Javascript and it will be stored in a memory to make comparisons when the render is called.

What is re-rendered DOM?
Re-rendered DOM is one which gets created when the render method is being called and it will be used to compare with virtual DOM.