Before discussing how virtual dom is better than real dom. We will first see what actually real dom and virtual dom are -

Real DOM

DOM stands for document object model, DOM treats HTML files as a tree structure, it creates nodes for all the HTML elements which are present on our HTML page. It is having a tree-like structure where the root node is HTML, and then the root node is been divided into head and body nodes. The Head node is used to keep meta information and in the body node, all our elements that are to be displayed on the screen is been present.

When real dom was created it was designed to be used for the static pages ( pages in which data is not been updated/changed ). But due to the demand for a dynamic website, it becomes difficult to use real dom for the updation. Because if any one element is been updated or added, then the whole HTML and CSS which is been rendered on the screen needs to be updated, which can cause memory inefficiency and app performance issues.

Problems with real DOM -

As you can see in the above paragraph that we have talked about some problems which is been faced by real dom. Now let's dig into the problems it faces mentioned below. Whenever we update any data whether it may be a single data update, then it updates the whole HTML page and the whole CSS is been printed on the screen from scratch which makes it very inefficient and cost-effective.

But what is the solution for the problems which we face with real dom - so the solution for this problem is to react to virtual dom. But what is virtual dom?

Virtual DOM

Virtual DOM is the copy of real DOM, it looks the same as real dom, but it works a little bit differently which helps us in solving the real dom problems.

Virtual DOM is an exact virtual copy of real dom. But talking about the differences, When we update any element in react then the whole Html is not updated. It just checks which all the elements are being changed and then it updates only those components . But here comes the question that how to react is able to identify that which all things need to be changed.

So react keeps a snapshot of the previous virtual dom, and then it matches with the prevoius snapshot which it has taken. Then it analyses the changes which have been done in the virtual dom, so the process of firguring out that what all the things should be updated is known as diffing. Once react knows which all thnigs to be update then it updates into the react and this is call react reconcilliation.

What are keys in react Keys are the strings or numbers which are used to uniquely identify the element in react. It is very important to note that you should note use Math. random to create keys, because it may happen that if the same value of the key will be given to different components then it will update those components also which are not required.

The key should be unique to the sibling components, but not globally. It is very important to use keys in react because it will increase your app efficiency and thus make your app faster. let's take an example you are creating an eCommerce app and in that, you are rendering a product card through a product list.

But you have not used keys in your product card, so now when you are making some changes in any one product card then all the product cards will update, which will make your app slow. So you always use keys in react because that will only update that product card only and make your app more efficient.

so this was all about real dom and virtual dom.

I hope you liked this article, thank you for reading.