In this blog, I will discuss how the component tree is being inserted into the DOM tree and will see how React improves the performance of an application by preventing the application from unnecessary re-renders. In the last part, I concluded the blog with the component tree and hinted about the phases in the rendering process in an application. If you started reading my blogs from this blog, please go through my previous blogs for a better understanding and continuity of the concepts. I'm attaching the links below for the respective blogs.
Exploring the Inner Workings of React - https://dhanasaisundar.hashnode.dev/exploring-the-inner-workings-of-react
Topics I'm going to discuss in this blog:
Rendering of React Application.
The Render phase.
The Reconciliation Process in Action.
The Commit phase.
Rendering of React Application:
In React, rendering means calling the component function and figuring out what needs to be changed or deleted or maintained throughout the DOM tree for better performance of the application. Keep in mind that, if we want to make a efficient web application in react we want to design the application in a way that it has minimum re-renders through out the working of that application. Which leads to minimum DOM manipulation, because manipulating a DOM is always time consuming and it affects the performance and user experience of that application.
Renders are not triggered immediately, but scheduled for js engine when it has some “free time” in the call stack. There is also a concept called batching of multiple setState calls in an event handling function (Diffing, State Batching , Event handlers will be discussed later).
There are two main phases in the rendering process of an application,
The Render Phase (carried out by React).
The Commit phase (carried out by React DOM).
The Render Phase:
The render phase is the first phase where react figure out what are the changes that it should give to the DOM library of React called "THE REACT DOM". So at the end of the render phase react will have "the list of effects" which is to be committed in the DOM tree by React DOM and an updated React fiber tree which is used in the reconciliation process for the next render.
Now we can understand these process through an flow chart diagram,
So there are two main reasons where we can encounter rendering of a web application,
INITIAL RENDER -Initial render of an application where the components mounts for the first time in the browser.
React will take all the COMPONENT TREE and convert them into REACT ELEMENT TREE using the js compiler BABEL and these React element tree is called the Virtual DOM.
THE VIRTUAL DOM: Tree of all React elements created from all instances in the component tree. Cheap and fast to create multiple trees unlike the DOM tree.
RE-RENDER: When there is a state change inside one or multiple components in the component tree.
Now React will discarded the old React element tree and will create a new React Element tree which means new virtual DOM.
Rendering a component will cause all of its child components to be rendered as well (no matter if the props changed or not) and it is necessary because React doesn’t know whether the children will be affected by the state change or not.
The DOM is not touched in this process, only the virtual DOM is rendered.
This new virtual DOM is then reconciled with the current Fiber tree(has records of elements before the state update) in order to update the DOM with respect to the state change and this process is called Re-conciliation.
RECONCILIATION AND FIBER TREE:
Reconciliation: Deciding which DOM elements actually need to be inserted, deleted, or updated, in order to reflect the latest state changes
The result of the reconciliation process is gonna be a list of DOM operations that are necessary to update the current DOM with a new state and an updated fiber tree.
Reconciliation is done by the React Reconciler(The engine of React).
The Reconciler is called the Fiber.
The Fiber takes the entire React Element Tree and make another tree called The Fiber Tree.
The Fiber tree is a tree-like data structure where each node represents a component or an element in the React application. These nodes are known as fibers.
Unlike React Element Tree, the Fiber Tree are not discarded and created for every render. They just mutate to the state updates in the components instances.
The Reconciliation Process in Action:
First we have the React element tree , where the App component has four children HEADER, THE BLOG POST, FOOTER, TOGGLE BUTTON.
The App component has a state {showBlogPost = true} which is used to show and hide THE BLOG POST Component
When the TOGGLE BUTTON component of App component is clicked, the state changes {showBlogPost= false}.
Which in turn triggers the re-render of the App component. [🚨 Rendering a component will cause all of its child components to be rendered as well (no matter if props changed or not)]
So the child components of App is also re-rendered.
What happens in the re-render is the React element tree is discarded and a new react element tree is created and the THE BLOG POST component is deleted from the new Virtual DOM.
This updated virtual DOM is Reconciled by the Fiber reconciler, where every fiber in the Fiber tree is checked with the updated Virtual DOM for changes. This process is called Diffing which will be discussed later.
The result of this Reconciliation process are the updated Fiber tree and a List of Effects which going to be implemented in the DOM tree.
The Commit Phase:
The commit phase is were React writes to the DOM which means the list of DOM updates(insertion, deletions and updates) from the Render phase are to be implemented in the DOM tree are executed in this phase.
These DOM updates are synchronous in nature which results in a consistent UI through out the application.
After the Commit phase the workInProgress fiber tree will become the current fiber tree for next Render phase.
🚨 Render phase is done by REACT.
🚨 Commit Phase is done by REACT DOM.
As React can be used in different environments such as Web development, Mobile App development, Video generation, PDF generation, word generation ans so different renderers are used such as React DOM, React Native, Remotion. So that React is platform independent.
Conclusion:
In this blog I tried to cover the internal workings of how rendering of a web pages works behind the scenes. But this is a simple over view of React's engine. In depth there are lots of computing are done and they are not that important to be known.
But there is an important concept I would share with you all in the next blog. We will going to discuss how diffing works in the reconciliation process to enhance the performance of the React library and what is the use of attribute "key" in React.
So Make sure to subscribe to my newsletter so you don't miss out any topics I discuss here and feel free to drop your thoughts in the comments section! Let's keep the conversation going.