Question about Diffing Algorithm in React?

Question

I am trying to learn the general concept of virtual dom in React.

My assumption is as follows:

React uses virtual DOM to enhance performance. Virtual dom is a lightweight copy of the real DOM stored in memory. When there is a change of state or prop, React creates a virtual DOM. It uses the diffing algorithm to compare the previous virtual DOM with the updated virtual DOM. Lastly, it performs a process called reconciliation to determine which part of the real DOM needs to be updated and update it.

Here are a few questions that I have:

Does React has two Virtual DOMs? When I google, it said React only has 1 virtual DOM. So after it compares the previous virtual DOM with the updated virtual DOM, React automatically deletes the previous virtual DOM?
Another article I found online here says that the diffing algorithm is the comparison of the real DOM with virtual DOM. So I am confused because many articles on google said diffing algorithm is the comparison of the previous virtual DOM and the updated virtual DOM.

See this answer, specifically the link to the Fiber architecture guide. — jsejcksn
– jsejcksn, Commented Jul 11, 2022 at 4:30

Raghu Aryan · Accepted Answer · 2023-01-27 14:58:21Z

0

Yes react maintains two virtual DOMs every time. The first one contains the updated virtual DOM, and the other is a pre-updated version of the updated virtual DOM. It compares the pre-updated version of the updated virtual DOM and finds what was changed in the DOM, like which components will be changed.

Here you can see in details

answered Jan 27, 2023 at 14:58

Raghu Aryan

931 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Question about Diffing Algorithm in React?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related