One of the key features of React is its virtual DOM. Whenever the explanation or benefit of virtual DOM is talked about, is it always said that DOM manipulations are an expensive operation and that is where virtual DOM helps in reducing the number of DOM manipulation.
Virtual DOM is an object representation of nodes, elements, attributes, and contents. So whenever there is an update in data, the below process is for updating the actual DOM.
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
- The difference between the previous Virtual DOM representation and the new one will be calculated.
- The real DOM will be updated with what has actually changed. This is very much like applying a patch.
Virtual DOM uses a diffing algorithm to find the difference between previous DOM and new virtual DOM and does the reconciliation on the changed part of DOM and update the DOM with changes.
// Todo add browser rendering details