ReactJS shouldComponentUpdate() Method

The shouldComponentUpdate method allows us to exit the complex react update life cycle to avoid calling it again and again on every re-render. It only updates the component if the props passed to it changes.

The shouldComponentUpdate method is majorly used for optimizing the performance and to increase the responsiveness of the website but do not rely on it to prevent rendering as it may lead to bugs.

Syntax:

shouldComponentUpdate(nextProps, nextState)

Return value: It by default it returns true and if it returns false then render(), componentWillUpdate() and componentDidUpdate() method does not gets invoked.

Example: In this example, we are going to build a counter application which only renders when its props value is changed.

App.js

Javascript

import React, { useState } from "react";
import Counter1 from "./Counter1";
import Counter2 from "./Counter2";


const App = () => {

// Using useState hooks for defining state
  const [counter1, setCounter1] = useState(0);

  const increase1 = () => {
    setCounter1(counter1 + 1);
  };
  const [counter2, setCounter2] = useState(0);

  const increase2 = () => {
    setCounter2(counter2 + 1);
  };

  return (
    <div className="container">
      <div>
        <Counter1 value={counter1} onClick={increase1} />
      </div>
      <div>
        <Counter2 value={counter2} onClick={increase2} />
      </div>
    </div>
  );
};

export default App;

Without using shouldComponentUpdate() method:

• Counter1.js

  Javascript

  import React, { Component } from "react";
  
  class Counter1 extends Component {
    render() {
      console.log("Counter 1 is calling");
      return (
        <div>
          <h2>Counter 1:</h2>
          <h3>{this.props.value}</h3>
          <button onClick={this.props.onClick}>Add</button>
        </div>
      );
    }
  }
  
  export default Counter1;

• Counter2.js

  Javascript

  import React, { Component } from "react";
  
  class Counter2 extends Component {
    render() {
      console.log("Counter 2 is calling");
      return (
        <div>
          <h2>Counter 2:</h2>
          <h3>{this.props.value}</h3>
          <button onClick={this.props.onClick}>Add</button>
        </div>
      );
    }
  }
  
  export default Counter2;
• Output:
  

With using shouldComponentUpdate() Method:

• Counter1.js

  Javascript

  import React, { Component } from "react";
  
  class Counter1 extends 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("Counter 1 is calling");
      return (
        <div>
          <h2>Counter 1:</h2>
          <h3>{this.props.value}</h3>
          <button onClick={this.props.onClick}>Add</button>
        </div>
      );
    }
  }
  
  export default Counter1;

• Counter2.js

  Javascript

  import React, { Component } from "react";
  
  class Counter2 extends 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("Counter 2 is calling");
      return (
        <div>
          <h2>Counter 2:</h2>
          <h3>{this.props.value}</h3>
          <button onClick={this.props.onClick}>Add</button>
        </div>
      );
    }
  }
  
  export default Counter2;
• Output: