React: The Virtual DOM

Hello everyone. Today I am going to talk about Virtual DOM.

First, let’s briefly talk about DOM and Real DOM concepts for better understanding.

DOM (Document Object Module) : It is a tree structure that represents the structure of a web page. The DOM allows us to manipulate the properties of objects within a page.

Real DOM : It is the actual HTML tree that directly represents a web page in the browser.

We can say that Virtual DOM is a copy of Real DOM. React does the state change in the Virtual DOM instead of completely updating the Real DOM every time the state changes. It then compares the virtual dom with the real dom and reflects the changes to the Real DOM. This way only the changed components are rendered.

Virtual DOM provides a huge performance advantage as the DOM is not updated with all its components. To do this React uses a diff algorithm. This algorithm finds the change and renders only the component with the change. This benefits us and the users in terms of time and performance.