React, under the hoods.

In this article i am going to discuss about the basic functionalities and operational flow involved in the react rendering process. like all other peer front end library/ frameworks the basic architecture behind React is also a data driven architecture. Where we receive data from back end render it in client side and form visible UI. the difference of front end frameworks lies in the execution way of this transformation.

React doesn't update or work on the enitre DOM( Document Object Model) each and every time when there is a change in data/ state. instead in react it uses a sophisticated algorithm to reduce the cost of DOM operations is called Fiber algorithm(Reconcile).

I try to unravel the algoritham and point out few functions so that anyone can start dig the react source code by having a brief understanding.

Lets start with the render method , which is apparantly returns the so called 'virtual DOM' . Virtual DOM primarily consist of a tree of immutable react elements. There are diffenet kinds of react elements like class / functional components, hostcomponents, portals etc. Besides the tree of this react elements Framework creat a tree of internal instances which is called Fiber.

React Fiber is getting created in reconciliation , during this execution every react elements returned from render method creates a corresponding Fiber node . Fibers are mutable datastructure that holds component data structure and DOM

All the Fiber nodes are connected through a linked list. First time react element moved to fiber and for the subsequent updates react reuses the same Fiber. When react working on first time render/update there will be two trees current and WIP. Fiber node object have all the necessery details require for the work to perform on that node or connected nodes( Through effect list). few of the fields are alternateTag, effectList and stateNode rest of the fields you can explore in the source code .

Reacts performs work in two phases.

1. Render
2. Commit

Render refering the first time creation of the fiber and subsequent updations on the same fiber.
result of this phase is the tree of fiber nodes marked with side effects. It can be asynchronous.

In Commit phase React takes the fiber nodes which is marked with effects and appliens them to the instances . in this phase goes over the list and performs DOM update which is visible to the users , because of that it will always be synchronous.

Main functions in Fiber node work loop( Where the nodes are getting processed) are

1. performUnitOfWork.
2. beginWork.
3. completeUnitOfWork.
4. completeWork.

in the execution variable nextUnitOfWOrk holds a refernece to the node in WIP it checks for the next node , the performUnitOfWOrk which then fetch the node. once it got the node it starts the execution which always return next child in the process if available or null. if a next child available then assign the refernece to nextUnitOfWOrk variable. once the work finishes backtrack execution starts to fetch next branch or sibling. which is done by completeUnitOfWork.

Refernce:
https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react