Linguine Code

How to avoid multiple re-renders in React with 3 lines of code

Are you noticing multiple re-renders from a component and its sub components?

If that’s the case, this can be bad news for you.

Take a look at the image below.

Multiple sub-components re-rendering

If React state changes in the parent component, every single sub component would re-render by default.

What if the SiblingComp or the last nested SubComp doesn’t need to get re-render?

Is there a way to avoid re-rendering?

You’re in luck, React provides the tooling to avoid re-rendering per component.

But before I get there, let’s go over some basics.

What does the React render function do?

React render is one of the many component lifecycles that a React component goes through.

The render method is required whenever you’re creating a new React component.

React render requires you to return a value. This may either be null, undefined or JSX markup.

During this lifecycle you should always keep it pure, and avoid modifying state.

Modify state inside the React componentDidMount lifecycle.

This is because the render function may be triggered multiple times.

Which may cause your app to go through an infinite loop, then crashing.

So this beg to question,

When does React decide to re-render a component?

The first render gets triggered after the componentWillMount lifecycle.

It then gets triggered after the React componentWillUpdate lifecycle.

After a React component does mount, it will be listening for any React props or state that has changed.

Once it detects something has changed, it will, by default, re-render the entire React component and it’s child components.

Is it bad to re-render multiple React components?

Yes, and no.

In theory, having every component re-render can be expensive, but React is pretty fast, and it’s really good at noticing what’s different and what’s not.

This is more of an optimization question.

The best way to measure the performance of these re-renders if to use React’s performance NPM module tool.

To learn more about it go here.

So you’re next question may be, how do I avoid multiple re-renders in React?

When to use React shouldComponentUpdate?

React shouldComponentUpdate is a performance optimization method, and it tells React to avoid re-rendering a component, even if state or prop values may have changed.

Only use this method if when a component will stay static or pure.

The React shouldComponentUpdate method requires you to return a boolean value.

Return true if it needs to re-render or false to avoid being re-render.

How to use React shouldComponentUpdate?

Here’s a basic example of how to use React shouldComponentUpdate.

First I’ll start by creating 2 basic React components.

Console log render lifecycle

In the images above, I’ve created 2 React components.

One is a greeting component, and the other is the app component.

Each React component is console logging a message during the render lifecycle.

Next, I will add React state, and update the state value in the componentDidMount React lifecycle.

Change state in parent component

You can see in the console tab, that the render lifecycle got triggered more than once on both the app and greeting component.

This is because the React app component got re-rendered after the state values were modified, and it also re-rendered its child components.

We can assume that the greeting component is static, and that it’s not ever going to change.

I’m going to prevent it from being re-render now.

The first step is to add the shouldComponentUpdate lifeycle to the greeting component and make it return false.

Return false in shouldComponentUpdate

In the code image above, I’m console logging a message when the component gets to the shouldComponentUpdate lifecycle.

I’m then returning the value false on line 6.

This will tell React to ignore this component as it’s updating its virtual DOM.

On the console tab, You can see the App and Greeting component went through a round of the render lifeycle.

Then the App component went through the render lifeycle again after the state values were changed.

But the Greeting component did not console log the render lifecycle message.

Hooraay! That was easy.

shouldComponentUpdate also provides arguments that contain future values for props and/or state.

nextProps and nextState  arguments in React shouldComponentUpdate

So you can perform any conditional logic with current and future values, and determine whether you need the component to update or not.

Conclusion

Only use React shouldComponentUpdate when your app hits a performance bottleneck.

Or when it’s extremely obvious that a component you’re building will be static at all time.

If you’re interested in learning how to optimize your React components with a much simpler approach, check out the next article: The difference between React component vs pure component

GitHub example link