ShouldComponentUpdate and Virtual DOM react

Question

How does react create a new virtual DOM for a component when it is updated using a setState() call, even when shouldComponentUpdate() returns false?

Does react create the virtual DOM again for all components, even for components on which setState() was not called? I mean suppose setState() is called on child component, does react a new virtual DOM for the parent component also?

Answer 1

Does react create virtual dom even when shouldComponentUpdate returns false ?

No it does not. If shouldComponentUpdate returns false, the re-render for that particular component and its children is not done.

Does react create virtual dom again for all components, even for component on which setstate is not called.

It will create for those components (and its children) whose state or props have changed. But that does not necessarily mean actual DOM update will happen. Also as mentioned above if any of those components return false from shouldComponentUpdate , re-render is stopped for that component and its child trees.

I mean suppose setstate is called on child component, does react new virtual d for parent component also

No. Parent causes child re-renders, not the reverse. React only re-renders that subtree. Not its roots.

That said, a re-render (Virtual DOM creation) does not always mean DOM change. If previous virtual DOM & new virtual DOM for a subtree is same, the actual DOM is left untouched.

React has explained this using a very clear and concise example in their docs .