React’s Virtual DOM

Question

I know this might be a duplicate, but I really have some difficulties understanding this part of React's reconciliation algorithm. So Virtual DOM is in memory representation of the Real DOM. And whenever we call setState() React creates another copy of Virtual DOM and compares it with the previous one or it changes existing Virtual DOM and compares it with Real DOM?

Answer 1

Any changes are made or compared within Virtual DOM instances only.

When you do setState, React makes another copy of virtual DOM with the desired change and compares the old and the current virtual dom to only apply the change in the actual DOM in the browser

You can read more about Virtual DOM and its implemntation in the React docs

According to the Reconcilation link within the react docs

Reconciliation is the algorithm behind what is popularly understood as the "virtual DOM." A high-level description goes something like this: when you render a React application, a tree of nodes that describes the app is generated and saved in memory. This tree is then flushed to the rendering environment — for example, in the case of a browser application, it's translated to a set of DOM operations. When the app is updated (usually via setState), a new tree is generated. The new tree is diffed with the previous tree to compute which operations are needed to update the rendered app.