DEV Community

Cover image for Demystifying Reactjs Rendering Behaviour

Demystifying Reactjs Rendering Behaviour

I thrive to design and develop ideas into project that makes life easy, solve problems and implement innovations.
・3 min read

In this series of articles, I will talk extensively about how reactjs renders components and how it tries to improve performance by using a reconciliation algorithm to only update the part of the DOM that need updating.

What Is Rendering

Rendering is the process of react asking your component to describe what they want their section of UI to look like based on the current combination of props and state.

When we run react applications, the code written in our components gets translated into elements that get mounted into the DOM this happens in two phases:

  • the render phase
  • the commit phase

Initial Render

Alt Text

1) the Render Phase: this is the first phase and during this phase, react will start at the root of the component tree and transverse downward to all the components. While transversing for each of the components react invokes the createElement() method which converts the component JSX into react elements and stores the render output. React elements are basically Javascript objects that describe the structure of your user interface. Once the JSX to react elements conversion is done for the entire element tree, all the react elements are handed over to the commit phase.

2) In the Commit Phase, the react elements are handed over to the DOM using the react DOM package.
Note: this is the rendering behavior for just the initial render of your app. But components also need to re-render to update the UI so let's see how the re-rendering works.


Alt Text

1) The Render Phase: during the render phase, react will start from the root of the component tree and loop downward to find all the components that have been flagged as needing updates. A component can flag itself as needing update by calling a use UseState() setter function or calling the UseReducer() despatch function then for each of the flagged components, react will invoke the createElement() method and converts the components JSX into react elements and stores that render output.

After it has collected the render output from the entire component tree, React will diff the new tree of objects (referred to as Virtual Dom) and collect a list of all the changes that need to be applied to make the real DOM look like the current desired output. The diffing and calculation process is known as reconciliation.

2) In the commit phase, React then applies all the calculated changes to the DOM in one synchronous sequence. rendering is not the same as updating the DOM this is very important because a component may be rendered without any visible changes to the DOM for example if during the process of reconciliation (react compare the previous render and the new render if there are no changes, the elements are discarded and no changes is applied to the DOM). This is necessary because DOM updates are slow and react handles DOM updates efficiently by updating the components at once this helps reduce the performance issues incurred by updating the DOM multiple times in rapid subsection.

In this series of articles, I will try to explain how components render, why they re-render, and how to improve the performance of our react application. This knowledge will help you write a performant react application. I will write more about the re-rendering process because the initial render is straight forward.

Discussion (0)