How React Virtual DOM decide to update Browser DOM

Virtual DOM structure will be the same as Browser DOM structure

What is Virtual DOM

DOM generally is a term of “Document Object Modal” is a type of tree data structure. It represents an application UI.

I quoted this from React’s official document:

“The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM”.

That means when one element is created in a Browser DOM (real DOM) it will be created in Virtual DOM as a node.

Why need Virtual DOM

The changes and updates of DOM tree is fast because of it’s tree data structure, but it’s slow when re-rendering or re-painting the page when one small node is changed or updated. This is a right place to Virtual DOM come to play in the game of performance.

Are you ready to reveal the secret of Virtual DOM?

How Virtual DOM decide to update real DOM and re-paint UI and how it make updating UI is faster.

React using Diff algorithm to compare new Virtual DOM tree with previous Virtual DOM tree to check which node is changed and then re-paint only the nodes that is changed on Browser DOM→ much faster than update and re-paint entire application when a single node is changed.

The React document is best explain of diff algorithm, so I will not re-type them here. I’ll just give an example which parts Virtual DOM decide to re-paint in Browser DOM.

• Assume we do not use any PureComponent or shouldComponentUpdate or memo… When the parent node is updated, the children node will be updated too. But don’t be afraid, Virtual DOM have not done here.

Changing parent state will re-render children

• In the case, props of child components depend on updated state of the parent component, the Browser DOM will be updated the same as Virtual DOM

• In the case, props of child components DO NOT depend on updated state of the parent component, the Browser DOM will be updated differently with Virtual DOM

Please check out my simple demo on youtube in Vietnamese to have better understanding: https://youtu.be/je7qu4UcW9Q

I hope this can help you to wrap around your head about ReactDom.

Feel free to leave a comment. Thanks for reading!

Happy coding!