How does react re create react element tree (virtual DOM) on every state update?

I have been reading that for every state update react generates the react element tree (virtal dom) and compares the newly generated react element tree( virual dom) with the new one using a diffing algorithm. But here is the confusion.

suppose I have a tree of component
React component tree

And if the state is updated in component D, then how does react creates the whole new react element tree (virtual dom) without calling all the components in the tree?

Or does react just creates the virtual element tree for the updated component or what actually happens?

I read a lot of articles about react rendering behavior but couldn't figure out this.

Suppose you have a component tree: A -> B -> C -> D
If the state is updated in component D, React will re-render component D.
When component D is re-rendered, React generates a new Virtual DOM representation for D.
React then performs the diffing process between the previous Virtual DOM for D and the new one.
The diffing process identifies the specific changes that occurred in component D's Virtual DOM.
The crucial point to understand is that React's diffing algorithm optimizes the process by focusing only on the components that are affected by the state change. It doesn't trigger rendering for unrelated parts of the component tree.

So, React doesn't re-create the entire Virtual DOM or re-render the entire component tree for every update. It selectively updates only the parts of the Virtual DOM that have changed due to state updates.

This is what makes React efficient and enables it to provide a smooth user experience even in complex applications. The diffing algorithm's ability to identify and apply only the necessary changes reduces unnecessary work and DOM manipulation, resulting in faster and more efficient rendering.