Overview Of React Virtual DOM
React makes sure that the render function's output is what the page actually contains.
This may involve adding elements, removing elements, or updating elements in-place.
These are the kind of operations that traditionally jQuery is used for. Unfortunately, making updates to the DOM can be slow, and multiple unnecessary updates can severely impact the responsiveness of a site, especially as the number of updates grows.
React needs to be able to compare what is currently in the DOM to what should be there.
It outputs a data structure known as a Virtual DOM.
This virtual version of the DOM is greatly simplified and very fast to work with.
React then checks the virtual DOM against the real DOM in the browser and makes a list of updates to perform.
Since DOM manipulation is a slow process, this ensures that only elements that have genuinely changed are updated