ReactJS shouldComponentUpdate Method

In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.

This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.

Syntax

shouldComponentUpdate(nextProps, nextState)

By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.

Example 1

In this example, we will build a React application with components only getting re-rendered if the props passed to them changes.

Our first component in the following example is App. This component is the parent of the MyComp component. We are creating MyComp separately and just adding it inside the JSX tree in our App component. Only the App component needs to be exported.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = { color: '#000' };
   }
   render() {
      return (
         <div>
            <h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
            <button onClick={() => this.setState({ color: '#ff0000' })}>
               Change Color
            </button>
            <MyComp />
         </div>
      );
   }
}
class MyComp extends React.Component {
   shouldComponentUpdate(nextProps) {
      // Rendering the component only if
      // passed props value is changed
      if (nextProps.value !== this.props.value) {
         return true;
      } else {
         return false;
      }
   }
   render() {
      console.log('MyComp component is called');
      return (
         <div>
            <h1>Simply Easy Learning</h1>
         </div>
      );
   }
}
export default App;

Output

In the above example, MyComp component gets re-rendered only if the received props and the previous props are different. The above code will generate the following result −

Example 2

In the next example, we are going to execute the same code without shouldComponentUpdate() method to see the difference.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = { color: '#000' };
   }
   render() {
      return (
         <div>
            <h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
            <button onClick={() => this.setState({ color: '#ff0000' })}>
               Change Color
            </button>
            <MyComp />
         </div>
      );
   }
}
class MyComp extends React.Component {
   render() {
      console.log('MyComp component is called');
      return (
         <div>
            <h1>Simply Easy Learning</h1>
         </div>
      );
   }
}
export default App;

Output

Here, MyComp component gets re-rendered every time when the parent component, i.e., the App component gets re-rendered. The above code will generate the following result −