From React Class component to Functional component with hooks

Optimize React Re-Renders with shouldComponentUpdate

September 12, 2023 · 8 minutes

When any component receives new state or new props, it re-renders itself and re-renders all its children: that is the default behaviour.

The matter is that the component and its children are re-rendered even if the props haven’t changed!

Fortunately, React provides two solutions to prevent these unnecessary children class components re-renders because of parents :

  • the shouldComponentUpdate() lifecycle method,
  • the PureComponent.

Be careful, these solutions depends on the situation and have specific uses.

Let’s discover when to use them and how to implement these two solutions in React Class Components.

Summary

The shouldComponentUpdate lifeCycle method

This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs.  The React legacy advise us to consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand.

When to use the shouldComponentUpdate() method?

The shouldComponentUpdate() method:

  • is used in class components only,
  • can be called when children components receive new state or props to declare specifically if the components should update or not depending on its own state and props,
  • is invoked before rendering an already mounted component when new props or states are being received.

How does the shouldComponentUpdate() method works?

The shouldComponentUpdate() method:

  • takes nextProps and nextState as arguments;
  • compare the current props (this.props) to the next props (nextProps);
  • determine if the component needs to update or not;
  • return a boolean value (true or false) accordingly that tells React whether or not to update the component (render when true);

How to implement the shouldComponentUpdate() method?

  1. Declare the parent component, declare the child component and insert it in its parent.
  2. In the child component, below the constructor, declare the shouldComponentUpdate() method and pass it nextProps and nextState as arguments if the component receives props and have its own state.
  3. Inside the method, if the component receives props, insert the condition when the true boolean is returned like if (nextProps.propsName !== this.props.propsName) return true;
  4. If the component has its own state, insert the condition when the true boolean is returned like if (nextState.stateProperty !== this.state.stateProperty) return true;
  5. Then add return false.

Code structure when the child component receives no props and has no state

To prevent a child component which receives no props and has no state to re-render, you just have to implement the shouldComponentUpdate function with no arguments passed and returning false only.

shouldComponentUpdate() {
    // will never re-render component
    return false;
}

Remark: Passing nextProps and/or nextState as arguments when there are not props or state will throw an error in the console!

Code structure when the child component receives props but has not its own state

Pass netxProps as argument and insert the rendering condition based on the received props.

Remark: the below code is the standard one. The condition can be another one: refer to the given example whose condition is based on even numbers.

shouldComponentUpdate(nextProps) {
    // re-render component if and only if “propsName” changes
    if (nextProps.propsName !== this.props.propsName) return true;
    return false;
}

Note: Be careful when using the shouldcomponentUpdate() method, if this above code is inserted in a child component which has it’s own state, the component won’t be re-rendered when its state changes ! Do not forget to pass nextState as argument and to insert the condition based on the state as shown below.

Code structure when the child component receives props and has its own state

If the child component receives props and has its own state, use the below code structure.

Remark: The conditions can be others but be very careful and assure you not to forget/prevent important re-rendering.

shouldComponentUpdate(nextProps, nextState) {
    // re-render component if and only if “propsName” changes
    if (nextProps.propsName !== this.props.propsName) return true;
    // re-render component if “stateProperty” changes
    if (nextState.stateProperty !== this.state.stateProperty) return true;
    return false;
}

In fact, if you are writing exactly the above code you have to stop and consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand.

Optimize the re-renders with the built-in React PureComponent

The built-in PureComponent prevent a child component rendering without leading to bugs.  Use-it instead of writing a shouldComponentUpdate() method by hand.

When to use the PureComponent?

The PureComponent is used:

  • in class components only,
  • to prevent children components which receive props and have its own state to re-render because of parent.

How does the PureComponent works?

PureComponent performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update as when using the shouldComponentUpdate() method.

How to implement the PureComponent?

It is easy to implement the React PureComponent: no need to modify the inside child component code, no need to add a method.

  1. When declaring the class component, replace extends React.Components by extends React.PureComponent.
  2. Change the ComponentName into PureComponentName.
  3. Insert the PureComponentName in the parent component as you would have done for the ComponentName, no change except the name!

That’s all!

class PureChild extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = { stateProperty: propertyValue }
    }
    render() {
      return (
        <div>
          <!– Use, display, modify state and received props here –>
        </div>
      )
    }
  }
class Parent extends React.Component {
    super() {
      this.state = { counter: 1 }
    }
    render() {
      return <>
        <!– insert elements, display or modify state here –>
        <!– child will NOT re-render when state here changes –>
        <PureChild propName=”propValue” />
      </>
    }
}

Write your first optimized re-renders child components with the below example

This example is based on a freeCodeCamp challenge I have modified by adding a third component having no state and receiving no props.

More information about the App we are going to code

In this example, there are three components : Controller, OnlyEvens and… NoChange (the one I have added).

  • The Controller parent component:
    • has a state property named value which is initialized with 0;
    • contains a button which increment the state value by 1 every time it is clicked;
    • contains a child component named OnlyEvens which receives a value (the state value property value) as prop;
    • contains a child component named NoChange which does not receive any prop;
    • re-renders every time its state is modified.
  • The OnlyEvens child component:
    • renders the value received as props in a paragraph;
    • should updates only if the value of its new props is even.
  • The NoChange child component:
    • renders a text in a paragraph;
    • has no state;
    • receive no prop;
    • will never be modified;
    • has no reason to be re-rendered.

Let’s code the App step by step

Code the optimized re-renders App step by step

We consider that React as been installed or a new pen as been created on codepen.

  1. Create the HTML file, the element and add it the optimize id attribute to “attach” the React App (Controller component) rendering.
  2. Create the Controller component, declare its local state value property and initialize the value it  with 0.
  3. In the render, insert the three elements:
    • the button whose text is “Add”, on which is assign a onClick event which trigger the addValue event handler method (to be created),
    • the OnlyEvens child component (to be created) which receives a prop named value whose value is the state property value,
    • the NoChange child component (to be created).
  4. Declare the addValue method which update the state property value by adding 1, and bind it.
  5. Create the NoChange child component wich renders only a paragraph containing “Not re-rendered NoChange component” (no constructor needed).
  6. In the NoChange component above the render(), insert a shouldComponentUpdate() method to prevent it to re-render because of its parent Controller. As this component has neither state nor received props, pass no argument to the method and insert no rendering condition.
  7. Create the OnlyEvens child component which renders the received props value in a paragraph.
  8. In the OnlyEvens component above the render(), insert a shouldComponentUpdate() method to prevent it to re-render because of its parent Controller when received prop value ode. As the render must be done when the value is even, we use a rendering condition using the modulo operator because even numbers divided by 2 modulo will ever equals 0.
  9. Click the Add button and note that the number of click display is not updated when it is odd.

That’s all. Find the final code below.

The final code of the optimized re-renders App

class NoChange extends React.Component {
    shouldComponentUpdate() {
      return false
    }
    componentDidUpdate() {
      console.log(‘NoChange re-rendered.’);
    }
    render() {
      return <p>Not changed but re-rendered Child Component</p>
    }
}
class OnlyEvens extends React.Component {
    constructor(props) {
      super(props);
    }
    shouldComponentUpdate(nextProps, nextState) {
      console.log(‘Should I update? Number of clicks: ‘ + nextProps.value);
      if (nextProps.value % 2 == 0) {return true};
    }
    componentDidUpdate() {
      console.log(‘Component re-rendered.’);
    }
    render() {
      return <p>{this.props.value}</p>;
    }
  }
  class Controller extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: 0
      };
      this.addValue = this.addValue.bind(this);
    }
    addValue() {
      this.setState(state => ({
        value: state.value + 1
      }));
    };
    componentDidUpdate() {
      console.log(‘Controller re-rendered.’);
    }
    render() {
      return (
        <div>
          <button onClick={this.addValue}>Add</button>
          <OnlyEvens value={this.state.value} />
          <NoChange />
        </div>
      );
    };
};

In the pen inserted below, I have added some console.log to check everything is running well:

  • A console.log inside the OnlyEvens shouldComponentUpdate() method displays ‘Should I update?’ and the number of clicks to control if the number is odd or even.
  • A componentDidUpdate() lifcycle method has been added to every component to insert a console.log which appears only if the component is re-rendered. Note that the parent component is re-rendered every time the state is updated by clicking on the button. But, if everything is ok, the NoChange re-rendered should never appear while the Component re-rendered should appear only on even click number.

Click the Add button and watch the order of events in the browser’s or pen console as the lifecycle hooks are triggered.

Play with the below pen

Do not hesitate to comment and uncomment the shouldComponentUpdate() method in each child component to check the order of events in the pen console.

See the Pen
React tricks: Optimize class component Re-Renders with shouldComponentUpdate by Coding-Tricks (@coding-tricks)
on CodePen.

In conclusion

In this article we have learnt how to optimize children components re-renders in a class component with the shouldComponentUpdate() lifecyle method and the PureComponent.

In the next article Optimize react re-renders with react memo we will discover how to optimize children components re-renders in a functional component with React.memo.

< Previous Post
Next Post >
Haut de page