Nowadays, React is popular among Front-end developers. There are tons of reasons why they prefer React. One of those is the concept of Virtual Dom. I learned what is the virtual DOM so I am going to write it.
Before React appears, web documents like HTML are loaded in web browsers to show users. They have tree-like structures.
When we would like to update something different, DOM (Document Object Model) works. This word is a little bit difficult for me so I think that Dom is an office to access each tag like head, title, body, header, nav, main, p, and div.
In JavaScript, If we want to change an element of div tag, we get div DOM and give it something different, and then the page has to re-render. In this way, DOM is changed directly and processed in the web browser. This process leads to being overloaded and the cost of re-rendering is high.
However, React can solve these problems because it uses the concept of a virtual DOM. React creates a virtual DOM to keep in memory whenever we render the user interface. If the next update occurs in the render, it compares the new version with the previous version and figures out the difference and the real DOM only changed the different points. It is called reconciliation. The updating is processed in the JavaScript engine and this process is implemented efficiently. The cost of re-rendering is low. Users also can see web pages more quickly than before.
According to this link, we can understand how virtual DOM works easily.
In summary, here’s what happens when you try to update the DOM in React:
- The entire virtual DOM gets updated.
- The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
- The changed objects, and the changed objects only, get updated on the real DOM.
- Changes on the real DOM cause the screen to change.
The Virtual DOM enables pages to re-render productively. That's why React becomes more and more mainstream among Front-end web developers.
Top comments (0)