React Virtual Dom under the hood

Question

I've read from the sources that If I update the state of any component than the whole virtual dom will be render ? Is It True ? If Yes, Then Why render method of all component not called ?

Also, Need some clarification on below point -

• What is Virtual Dom actually ? Any practical example for that ?

• I assuming that If we compare the virtual dom with actual dom, Virtual dom takes little time to update the dom than real dom. But how can practically prove that ?

• How react uses diffing algorithm to update only respective component In which changes happen (If I used setState method)

Any video lecture for that would be really appreciated.

Answer 1

No, what you've read is incorrect.

When you update the state of a component, meaning you have changed part of the virtual DOM, You'd be changing ONLY that specific part of React's virtual DOM and nothing else.

All other components do not get re-rendered whatsoever.

An answer to your questions:

1. Virtual DOM is a representation of the actual DOM in plain JavaScript object. Comprehensive details on what is virtual DOM can be found in this stackoverflow question and this medium article

2. Manipulating the real DOM is indeed very expensive in regards to efficiency. On the other side, virtual DOM is very efficient. Here are a couple of articles which can help you understand how: Codecademy and Medium article

3. Codecademy explains how diffing algorithm works but you can also read the following for further information about mentioned algorithm on React's official documentation.

I believe the articles I found and listed here are sufficient to understand the virtual DOM, the performance difference between virtual DOM and real DOM and how does the diffing algorithm works