Hey folks, I was exploring how react works or processes under the hood with the browser or network call or even updating those DOM elements. I am no expert, this blog is about an overview of the React Algorithm reconciler and Fiber. I might be incorrect in some places as I am not deep-dived into react algorithms but we will cover some bit of it. This blog will get updated along the way as I explore more about browser processing with react algorithms.

Prerequisites: Have some idea about React basics, if you are a little inquisitive like me and like to know what goes on under the hood then this blog is for you. I would appreciate any suggestions or feedback provided in the comments. Without wasting much time let's get started!!

React is declarative so you don't need to have trouble with how things work internally or how are they implemented but we will deep dive into those algorithms - React Reconciliation Algorithm and React Fiber

**Reconciliation algorithm? **

You might know about virtual DOM from React 15, it is also known as stack reconciler because it uses stack internally - like stacking each task one after the other. It was synchronous and it could append or remove a task but only once the complete stack was empty, then only it will be able to pick the next, just generally how the stack behaves; once it is empty then only a new task can be added.

The Reconciling Algorithm is for diffing two DOM trees i.e. the Virtual DOM and the Actual DOM. When diffing two trees it will compare elements that are changed; in the case of the root element, it will tear down the whole tree and build a new tree from scratch. When comparing react elements of the same type it checks for the attributes that are changed and updates them and re-renders only those components.

What does re-rendering the component mean here?

Re-rendering the component means only rendering the component which has differences. So whenever a component is updated, on the re-render the state is maintained, and the props of the components are updated; it uses the key property to identify the elements uniquely and maintain them to check on re-renders, if the key is not provided if will iterate over the real DOM and virtual DOM and maintain mutation whenever sees the difference.

what exactly happens during the process of diffing \=>

Every react component will eventually return a react element which can in turn return a functional component or a render function in a class component. The Component will build a virtual DOM where it is in the form of a react element string; whenever react components render it will create new react elements and these new elements will be updated or added to a new virtual DOM tree.

React then needs to figure out how to efficiently update the UI to match the most recent tree.

React will then start the diffing algorithm where it will decide which DOM changes to append, these changes might be expensive and the diffing algorithm will minimize the updates using the reconciliation algorithm.

The drawback of the Reconciliation Algorithm?

let's take an example of an input field, when you change the value of input - there is processing of element which is like a network call for fetching huge chunks of data in the background which can eventually result in few components being rendered, so while typing in the input, the triggering network calls might experience delays because the stack reconciler is in middle of processing and as it will only process the next task once the stack is empty.

React Fiber:

The current React Reconciler- The fiber reconciler introduced in React 16, reconciler is based on the Fiber object, so what is fiber? - it is just a plain javascript object with properties, it has been the default reconciler since React 16. It focuses on smoother rendering of animation, gestures, and responsiveness of User Interface. It can divide tasks into smaller chunks and can prioritize those chunks, it can even pause or reuse those tasks or abort them. As compared to the previous react reconciler it is asynchronous.

It is all not about enhancement in performance compared to previous algorithms but also about the fundamentals of how new developments can be easily integrated. React Fiber is a completely backward-compatible rewrite of the old reconciler. We call it a tree but it is more like a linked list of nodes where in each node is a fiber.

Fiber develops a one-to-one relation with the component instance, the DOM node. It has many properties like tags, stateNode, child, sibling, return....

• Tags store the type of property in the form of numbers 0 to 24.

• StateNode property holds the reference to the things and using this react can access the state associated with the fiber.

• child, sibling, and return are related to the Fiber relationship.

Like React elements, the Fiber tree is internally related by a child, sibling, or return relationship. So in the general tree, there is a parent and child relationship but in Fiber there is only a single child and that child is referenced to the first child and the return is referenced to the parent node, wherein every child fiber should return once the work is completed.

Fibers are very often created from react elements and they share properties of their type and key. Most fibers are created during the initial mount Fiber uses functions like createFiberFromElements(), createFiberFromFragment(), createFiberFromText()....

The Fiber Tree consists of two trees - the current tree and the work-in-progress tree. React can't make changes to the current tree which might result in inconsistent UI, so instead it makes changes in work in progress and swaps it with the current tree.

Previously, I said Fiber divides work or tasks into chunks to process them asynchronously, so what exactly is work or task in this scenario, might be a state change, lifecycle function, or changes in DOM. Work can be handled directly or delayed for the future, using time slicing does split chunks. High-priority work can be handled immediately, and low-priority tasks like network requests can be delayed.

**Fiber is processed in **two phases**: the render phase and the commit phase.**

• During the render phase, React processing happens asynchronous, items can be prioritized, appended, or removed

• Commit phase, this phase is synchronous and cannot be interrupted, and the swapping of the tree is done in the commit phase (we will come swapping of the tree in the next part)

React Fiber Usage :

1. Error handling boundaries.

2. Fiber also has suspense and concurrent mode.

END

I will explore and dive more into the internal process and keep updating this blog !!!

For exploring more you can read about the blogs I referred to: blog.logrocket.com/deep-dive-react-fiber/#r.. indepth.dev/posts/1008/inside-fiber-in-dept..