Skip to content
Related Articles

Related Articles

ReactJS shouldComponentUpdate() Method
  • Last Updated : 16 Nov, 2020

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:
My Personal Notes arrow_drop_up
Recommended Articles
Page :