What is DOM?
Let’s first understand what DOM is? DOM stands for Document Object Model. It is a structural representation of a tree with nodes representing different HTML tags as JavaScript objects which makes it easier for the browser to understand.
We all have worked with DOM before in Vanilla JS like document.getElementById or document.getElementByClass and the list are in red endless with which we can easily modify the content as our heart’s desire.
Updating the content
To modify the content or styling, we need JavaScript objects as the browser cannot understand HTML tags. Every time we change the content or styling, a new state corresponding to that change is made, thus there will be a change in the state (from initial to final) updating DOM (UI) with it.
But we still have no clue of what became the most expensive limitation that such an Ideal process has that React came with a solution of its own to deal with it.
Problem with DOM
As already described, there is no such problem with the actual process, but this process can only be used for a DOM tree with a small number of nodes, when we are talking about, let’s say a thousand nodes, everything can go wrong.
According to the process, after every state change, the DOM tree has to be re-rendered, and re-rendering a tree with 1000 nodes is not a good way to deal with it as many things can go wrong like losing speed or accuracy and can even cost us as it may take a lot of space while doing so.
To solve this problem, react developed came up with a new DOM called Virtual DOM for React Apps.
Top comments (0)