A simple guide to understand how React performs rendering

When working on a react application we make use of state and props to develop interactivity between and within the components. We use it as a primary option to pass data. Whenever these states or props of the component change we see it getting updated on the webpage.

This whole process that gets initiated by a change in the state or prop, resulting in a DOM update is called rendering. What exactly happens when the state changes and how does the DOM (the real one) get updated after that change? Let us try and understand the process a little better.

React rendering process works in two phases. The first one is Render Phase and then the Commit Phase.

Render Phase: In the Render phase, the render method is called, as the render method is called a new virtual DOM is created which consists of the updated state or prop change. Then a comparison is performed between the previously rendered virtual DOM and the current updated virtual DOM using the diffing algorithm.

Commit Phase: In the Commit phase, based on the comparison in the render phase, the changes are directly applied to the real DOM. The new updates are inserted, existing DOM properties are updated and unnecessary DOM nodes are removed. After it's done we see the changes on the webpage.

During this phase, the following lifecycle methods are called

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount
4. componentDidCatch

These methods are called only once while side effects are permitted. If the state or view changes as a side effect inside any component, the render phase will be triggered again for that component and its children components.

Let's look at an example to understand this better. Below we have a Parent Component it has a Header component that takes a prop to display a title . Inside the Header component there is a NavMenu component which for now only displays text "Menu".

Output :

Next, it has an input field, button element, onClick of which we can add new task item to taskList state. This taskList is passed to the child component ToDoList. Which has the sole responsibility of displaying it.

Now that our app and console statements are ready let's add a new task item to the task list and check how a change in the state of a parent component affects its child component's render function. Remember every time the component's render function will be invoked a comparison will be made in its render phase and on completion of the phase the commit phase will begin. Below are the console statements which were displayed when the render function was invoked for a component.

Here we can see, the parent state change caused all its children to render again. This means after the state change of the parent component, the child components Header and ToDoList went into their render phase. For both the components, a new virtual DOM was created and a comparison was made between the previously returned element and the current returned element. In the case of the Header component, the comparison showed that there was no change to be made in real DOM in the commit phase.

Similarly, for the child component NavMenu in the Header component, the render function was invoked. So again a comparison was made which resulted in no changes to DOM. Having to create a new virtual DOM for these unnecessary renders and to do operations to carry out comparison is a waste of processing power. We will look into details of how to fix this with the help of Pure components, memo in the next article. For now let's understand the problem and keep in mind.

While the ToDoList component's comparison showed that a new item had to be added to the list it displays and necessary DOM manipulation was carried out. This process resulted in the app showing the first task in the task list.

Conclusion :

Whenever a state of component changes the render function gets invoked which causes all it's children to go into render phase. At times even though the child's own state or props don't change , the child component's render function gets invoked and a new virtual DOM is created then comparision is made just to find out that no updates are to be made to the real DOM for that component. This performance issue can be fixed using Pure components , memo , useMemo , useCallback.