ReactJS shouldComponentUpdate() Method

Last Updated : 10 Oct, 2024

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. The shouldComponentUpdate method is crucial for optimizing performance in class components. The ReactJS Course explains how to use this method effectively to prevent unnecessary re-renders.

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

</p><pre><code class="language-javascript"></code></pre><p></p><pre><code><span>import React, { Component } from "react";</span></code><br><br><code><span>class Counter1 extends Component {</span></code><br><code><span>  render() {</span></code><br><code><span>    console.log("Counter 1 is calling");</span></code><br><code><span>    return (</span></code><br><code><span>      <div></span></code><br><code><span>        <h2>Counter 1:</h2></span></code><br><code><span>        <h3>{this.props.value}</h3></span></code><br><code><span>        <button onClick={this.props.onClick}>Add</button></span></code><br><code><span>      </div></span></code><br><code><span>    );</span></code><br><code><span>  }</span></code><br><code><span>}</span></code><br><br><code><span>export default Counter1;</span></code></pre><p dir="ltr"><br></p><p dir="ltr"><b><strong>Counter2.js</strong></b><gfg-tabs data-run-ide="false" data-mode="light"><gfg-tab slot="tab">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

</p><pre><code class="language-javascript"></code></pre><p></p><pre><code><span>import React, { Component } from "react";</span></code><br><br><code><span>class Counter1 extends Component {</span></code><br><code><span>  shouldComponentUpdate(nextProps) {</span></code><br><code><span>    // Rendering the component only if </span></code><br><code><span>    // passed props value is changed</span></code><br><br><code><span>    if (nextProps.value !== this.props.value) {</span></code><br><code><span>      return true;</span></code><br><code><span>    } else {</span></code><br><code><span>      return false;</span></code><br><code><span>    }</span></code><br><code><span>  }</span></code><br><code><span>  render() {</span></code><br><code><span>    console.log("Counter 1 is calling");</span></code><br><code><span>    return (</span></code><br><code><span>      <div></span></code><br><code><span>        <h2>Counter 1:</h2></span></code><br><code><span>        <h3>{this.props.value}</h3></span></code><br><code><span>        <button onClick={this.props.onClick}>Add</button></span></code><br><code><span>      </div></span></code><br><code><span>    );</span></code><br><code><span>  }</span></code><br><code><span>}</span></code><br><br><code><span>export default Counter1;</span></code><br></pre><p dir="ltr"><br></p><p dir="ltr"><b><strong>Counter2.js</strong></b><gfg-tabs data-run-ide="false" data-mode="light"><gfg-tab slot="tab">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;