React DOM APIs

The virtual DOM (VDOM) is a concept where an ideal or virtual representation of a UI is kept in memory and synced with the real DOM by a library React DOM.

Earlier, React Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation, and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time.

To solve this issue, React brought into the scene the virtual DOM. The Virtual DOM can be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.

Working

1. React updates the Virtual DOM : When a component’s state or properties change, React updates the Virtual DOM to reflect the changes.
2. Virtual DOM diffing : React then compares the updated Virtual DOM with a previous version of the Virtual DOM to determine the minimum number of updates necessary to the actual DOM. This process is called diffing.
3. Batch updates to the actual DOM : React then batches the necessary updates to the actual DOM, reducing the number of DOM updates and minimizing the impact on performance.

Reference

• https://medium.com/@BharathkumarV/reacts-virtual-dom-17fdcb290a10
• https://www.geeksforgeeks.org/reactjs-reactdom/
• https://react.dev/reference/react-dom