ReactJs Virtual DOM

What is DOM? And why we are understanding react DOM?

DOM stands for 'Document Object Model'. It is a structured representation of HTML in the webpage or application . In modern javascript framework have change the way of web development.They have provided a great abstraction by addressing common issues in browsers and enhancing performance using methodologies that were not possible through plain JavaScript.

One of the most popular javascript framework of front-end development is React js.

What is react dom? How it is work?

React popularized something called the Virtual DOM.The virtual DOM is only a virtual representation of the actual DOM.For every DOM object, there is a corresponding Virtual DOM object. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.
ReactDOM is a package that provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.

-render()
-findDOMNode()
- unmountComponentAtNode()
- hydrate()
- createPortal()

How does a page render in a browser?

When a browser loads any webpage, the page is loaded in multiple parts, then it is constructed in the browser and rendered.

• The HTTP protocol returns data in bytes.

• These bytes are converted into characters, then tokens, then nodes, and then, lastly, the object model.

• The DOM (Document Object Model) is a tree-like structure that represents HTML. It is generated from a webpage’s HTML markup. Similarly, the CSSOM (CSS Object Model) is generated from a webpage’s CSS markup. The DOM and CSSOM are loaded independently as trees, and then they are combined into a render tree to form a webpage.

Why is React so fast?

There is no direct access or change to the DOM elements in Virtual DOM. When virtual DOM gets updated, React compares it with a virtual DOM snapshot that was taken right before the update. It then compares the new virtual DOM with the previous virtual DOM and figures out which objects have changed.
Once React knows which virtual DOM objects have changed, it updates only those objects on the real DOM and other elements don't get updated as opposed to what the real DOM normally does. This is how virtual DOM works behind the scenes, making it much faster.

Conclusion

Virtual DOM is a powerful concept that React uses to overcome standard performance issues in the browser.