Search code examples
reactjsreact-domreact-fiber

How React updates Fiber Tree and Work in Progress Tree?

When react commit phase completes, Fiber tree(tree-1) will be replaced with work in progress tree (tree-2 'which has latest updates'), then DOM will be updated, So here my question is:

After Fiber Tree is replaced with WIP(work in progress) tree, old Fiber tree will now become new WIP tree right ? So, WIP and new Fiber Tree are different now and so Fiber tree is not up-to-date with latest updates, So will it be updated with nodes in new Fiber tree or it will skip them ?

Or it will totally destroy old Fiber tree and creates new WIP progress tree ? What happens ?

Solution

  • Whenever there is an update, Fiber builds a workInProgress tree, which is created from the updated data from the React elements. React performs work on this workInProgress tree and uses this updated tree for the next render. Once this workInProgress tree is rendered on the UI, it becomes the current tree.