ReactJS shouldComponentUpdate() Method

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.jsJavascriptJavascriptimport 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;
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.jsJavascriptJavascriptimport 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;
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.jsJavascriptJavascriptimport 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;
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.jsJavascriptJavascriptimport 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;
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:
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?
How to set input type date in dd-mm-yyyy format using HTML ?
Difference Between PUT and PATCH Request