REACT PERFORMANCE

Analyses on Re-render of React Components — 1

Several methods are used to obtain a performance out of the normal rendering logic of the React components. In this article, we will discuss the React.PureComponent, React.memo and shouldComponentUpdate.

Onur Dayıbaşı

Published in

React Digital Garden

4 min readOct 6, 2022

Actually, I started writing this blog article on useCallback and useMemo as a continuation of the React Hooks articles. However, since the subject also covers the ClassComponent, I decided to provide information on the subjects related to the Performance on the ClassComponent side.

Here, there may be more than one reason causing the re-render of a component.

State Changes
Props Changes
Context Changes
Or, re-render of the parent component

Let’s initially lay emphasis on the effects of the state changes. State change is normally an update associated with the inner structure of the component. But it also affects the child components.

I have created the below example to deliberately explain this subject. You can get more information by taking a look at this example.

https://onurdayibasi.dev/rerender-with-state

I have created the example below:

→ ParentComp 
→ → NoState And PropsComp. (No State and No Props )
→ → Age Class Component (Age State exist Increment Age )
→ → Age Hook Component (Age State exist Increment Age)

We have created the basic test infrastructure

Re-render Effect of the State Changes

When we change the inner state through Age Class Comp → Age Inc., only the ClassComponent is rendered.
When we change the inner state through Hooks Comp → Age Inc., only the Hook Component is rendered.
The component is not rendered without state and prop.

State changes of the inner components do not trigger rendering of the components.

Let’s change the parent component and click on the Inc. button twice.

We encounter with an undesired situation. While it is expected that the renderDemo is called twice only, render is called in the components not having any feature (state and props) and value change.

Checking Internally Whether to Render the Component (shouldComponentUpdate)

3 factors cause rendering of the ClassComponent. These are props, state or context. We can prevent rendering of the component by checking these values with the next value within the component.

We could prevent render of the ClassComponent while the State changes of the inner components cause render of the other components.

forceUpdate

Sometimes when it is not possible to re-render the relevant component, we can force to re-render via the code from within the component. (link)

component.forceUpdate(callback)

PureComponent ve React.memo

If your component is ClassComponent, you can prevent rendering of the component if there is no state or props change by extending the PureComponent or using the React.memo HoC structure.

Then, does it provide the desired result?

Yes, you can understand from the image below that the shouldComponentUpdate is not rendered although the parent component is rendered.

Unnecessary rendering is prevented with the PureComponent and shouldComponentUpdate.

Then how could we ensure this to be FunctionalComp which is not a ClassComp? Whether it is ClassComponent or Functional component, re-render is prevented without any props change of the Class or function with the React.memo.