Forem: arnabchat90

React Internals - React Fiber Introduction

arnabchat90 — Mon, 29 Nov 2021 07:41:21 +0000

Being declarative is a good thing and probably the best about React. But like all good things there are few things that are not so nice about being declarative, because here you as a consumer of the library instruct react about what to do, and not bother about how it actually does it, which then makes it ok not to ever know goes under the hood.

Generally if you use react the way its supposed to be used, you would not need to know how react does what it does for us. But as you write more applications you would realize that understanding some of the internals of react will actually help you to write better code. Use react the way it was intended, rather than use a hack of some sort and then later regret it.

Virtual DOM

Most people while learning react, learn about the fact that when ever there is a state or prop update, the components re-render, and that changes are flushed to the UI(dom), and for obvious performance reasons, react does not always tear down and recreate the dom on every state change. That's when the concept of virtual dom comes in, react on every render creates an immutable tree of react elements from various type of components with the current state and props, whenever there is an update, it creates an updated react element tree. And then runs a diffing algorithm to transform the tree from one state to another.

Please read through the assumptions react makes and a high level take on the diffing algorithm used by react -

React Reconciliation Official Docs React Reconciliation.

This immutable tree of react elements was called the virtual dom before, but now the term is no longer used by the React team in their official documentation. I will call this the react element tree going forward.

Changes in React 16

React also used to keep an internal tree of instances, which are used to track state, in version 16 they introduced the concept of Fiber Nodes.

Fiber nodes constitute the internal tree that tracks state, props and effects.

From the moment state updates inside a component, to the moment actual dom changes, work that react does to achieve it is called reconciliation

This is the primary topic we are going to cover in-depth and in plain English with help of code snippets screenshots and diagrams for better and clear understanding.

Motivation for Fiber Architecture

React adopted the Fiber architecture for performance reasons, earlier the reconciliation process was completely synchronous, but in react fiber the reconciliation process is divided into two phases -

Render
Commit

We will come to what happens in each phase, but for now just remember that these two phases are asynchronous.
So the earlier issues with long running tasks causing frame drops and making the app laggy no longer exist.

Reconciliation Process - 10,000 Ft view

Create the Fiber Root from the root container element (when using ReactDom.render, createRoot is the new way of doing it, not part of this article) -
React would create a react element object starting from the top level component

For each and every react element(could be functional, class, DOM/Host component etc) there would be a fiber node created and is added to the Fiber tree(you would be surprised that this tree is not actually a tree but a linked list!!)
This fiber tree, basically acts as a mutable data structure, which keeps track of work to be performed on each of the fiber node, now work for each element might be different based on the component type, it might be firing component life cycle events, flushing updates to dom, calling a side effect etc.
So after the fiber node tree is created, in the render phase, for all the fiber nodes, the react framework, performs the work needed in each of these nodes and traverses the entire tree on child and siblings to make sure all the work defined in each node is performed, remember that no side effects are run during this phase and that these unit of work in each node is asynchronous, can be paused, scraped and redone.
Last phase is the commit phase, this is where the post render life cycle events, DOM updates and other side effect which can affect dom directly takes place, this phase hence has to be synchronous.
Once the commit phase is done, one cycle of the reconciliation phase is completed.

Below is a high level scribble for when ReactDOM.render is called for the first time and how the reconciliation kicks in.

On a broad level, this shows the initial creation of Fiber root, and then how the fiber tree is created based on the react element objects, and then work is performed on each of the node as part of the render phase.

This is where I stop for this introduction, I will come up with a more in-depth view where I would debug the whole cycle from updating an element and how finally dom changes are triggered and flushed.

But that's for another day, please do leave feedback below.

Debugging React Source Code with a React Client App

arnabchat90 — Sat, 17 Jul 2021 08:57:07 +0000

If you are looking to contribute to react or for that matter any large open source project, it can be a daunting task to understand such huge code bases, making sense of how to build it and run it locally and develop against it and fix bugs.

Today in this article we will tackle how to run the source code of react locally, and then create a create-react-app client and create a symlink between them, so that changing the source code of our local react package, can then be directly tested from the client app.

This is not specific to react, but in general really useful to learn if you are building libraries and packages and you would like to test it with a real world client app.

Before we start I would like to point you to the How to Contribute official documentation from the react team.

Setting up repos and symlink

Step 1: Clone/Fork the react repository to your local file system - git clone https://github.com/facebook/react.git
Step 2: Once you have cloned the repo, run npm install to install all its dependencies.
Step 3:
React repository uses yarn workspaces, which basically means, that they have divided the library into smaller re-usable packages, if you look at the package.json, you can see that there is a workspaces property which is an array, where they include everything inside packages folder, where they have the actual packages like react and react-dom etc.

We will take a closer look at the react codebase later.
Step 4: Build the react library - yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE, this command is going to build the react, react-dom and schedular package, you can simply run the build script to build all packages, but for our purposes we need only react and react-dom.
Step 5 : Once the build command successfully runs, you will see a build folder inside the root of the project, you will see that inside the build folder the packages we built are created inside the node_modules folder, and you will see react and react dom.

Step 6 : Create the symlinks, cd into the build/node_modules/react package and then from there run the command - yarn link
Step 7 : follow the same step for react-dom, cd into the react-dom folder and run yarn link.

Setting up the client app

Step 1 : Use create-react-app or any other scaffolding tool, I am using cra because its quite popular and scaffold a client app - npx create-react-app react-client. Do so in a different folder than where you cloned your react code.
Step 2: CRA runs yarn install for you, so if you run the app now, it will use the packages installed in your node modules, which has the react dependency from the online officially released version mentioned in your package json, but what we want is to use the built package we are currently working with. So here in the root directory of your client app run - yarn link react react-dom

That's it you have now successfully created a symlink from you client app to the locally cloned library.

Step 3 - Start the client app using yarn start, once the app runs open the debug window and checkout the path of the react library, it should point to your local build folder path and not the node_modules of your clients, and changes to your local library should reflect in the code your client app runs.

To give you some more details on how yarn/npm symlinks work refer to the image below -

With this you are now ready to make changes to the react code, build it and directly use it with hot reload and other goodness in your cra client app.

Hopefully this was helpful, feedback on the article would be appreciated.