Basics of React DOM

This article is about React DOM. So , today I’m gonna tell you basically what React DOM is.

It is also known as virtual DOM. There are a lot of libraries that have something like virtual DOM but I’m just going to discuss it as a reference to react right now. So what react does is that behind the scenes it creates a whole copy of the exact DOM. By the way, Let’s have a basic concept of DOM. The Document Object Model (DOM) is a programming API which is uses for HTML and XML. Every tag of a html/xml is a DOM.

As we can see in the picture above that behind the scenes it would create an exact copy of the same DOM but instead this would be reacted as a similarity checker. For example : if I make any change in the virtual DOM, It compares with actual DOM.

In this Picture we can see that , if we make a change in virtual DOM , the actual DOM is change the things in himself. In this case, if the actual DOM checks that all the nodes are same or not? What will happen? this will be very expensive because It will cost a big amount time for a large application.