React and its Algorithms:  Reconciliation and Fiber

Photo by Андрей Сизов on Unsplash

React and its Algorithms: Reconciliation and Fiber

what is React Stack Reconciler and React fiber ?

tarun's photo
tarun
·May 12, 2022·

5 min read

Table of contents

  • Reconciliation algorithm ?
  • what does re-rendering the component means here?
  • React Fiber :
  • Fiber are processed in two phase : the render phase and the commit phase.

Hey folks, I was exploring about how react works or process under the hood with the browser or network call or even updating those DOM elements. I am no expert, this blog is about overview about the React Algorithm reconciler, Fiber. I might be incorrect at some places as I am not deep dived into react algorithms but we will cover some 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, otherwise some part of it will just go over your head, if you are little inquisitive like me who likes to know what goes on under the hood then this blog is for you. I would appreciate for any suggestion or feedback provided in comments. Without wasting much time lets get started!!

React is declarative so you don't need have the trouble of 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 use stack internally. It was synchronous and it could append or remove task but only once the complete stack is empty, just generally how stack behave; once it is empty then only new task can be added.

Basically Reconciling Algorithm is for diffing two DOM tree. When diffing two trees it will compare elements that are changes incase if root element, react will tear down the whole tree and build a new tree from scratch. when comparing react elements of same type it check for the attributes that are changed and update them and re-render only those components.

what does re-rendering the component means here?

Re-rendering the component mean only render the component which only has differences So whenever a component is updated on 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 key is not provided if will iterate over the real DOM and virtual DOM and maintain mutation whenever sees difference.

what exactly happens during process of diffing => Every react component will eventually return a react element where it can be in return of a functional component or in the render function in a class component, it will build a virtual DOM where it is a react element string; whenever react components render it will create new react elements and these new elements will be updated or added to new virtual DOM tree. React will 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 the updates using reconciliation algorithm.

Drawback with Reconciliation Algorithm ?

let take an example of input field and onchange there is processing of another element which is like a network call for fetching huge chunks of data in the background which can result on few components being rendered, so while typing in the input and triggering network calls we 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 is the default reconciler since react 16. It focuses on smoother rendering of animation, gestures and responsiveness of User Interface. It can divide task into smaller chunks and can prioritize those chunks, it can even pause or reuse those task or abort them. As compared to previous react reconciler it is asynchronous.

It is all not about enhancement in performance compared to previous algorithms but also about fundamentals about 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 component instance, DOM node. It has many properties like tags, stateNode, child, sibling, return....

  • Tags store type of property in form of number 0 to 24.
  • StateNode property holds reference to the things and using this react can access the state associated with the fiber.
  • child, sibling and return are related to Fiber relationship.

Like React elements, Fiber tree is internal related by child, sibling, return relationship. So in generally tree there are parent and child relation ship 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.

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

Fiber Tree consist two tree - current tree and workInProgress tree. React can't make changes to current tree it might result into inconsistent UI, so instead it make changes in workInprogress and swaps it with current tree.

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

Fiber are processed in two phase : the render phase and the commit phase.

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

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

React Fiber Usage :

  1. Error handling boundaries.
  2. Fiber also has suspense and concurrent mode.
END

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

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

 
Share this