Skip to content
Related Articles

Related Articles

Improve Article

What does “shouldComponentUpdate” do and why is it important ?

  • Last Updated : 31 Aug, 2021
Geek Week

The shouldComponentUpdate is a lifecycle method in React. This method makes the component to re-render only when there is a change in state or props of a component and that change will affect the output. 

The shouldComponentUpdate() is invoked before rendering an already mounted component when new props or states are being received.

Syntax:

shouldComponentUpdate(nextProps, nextState)

Parameters: It accepts two parameters named nextProps and nextState. The shouldComponent returns the boolean of whether to return the component or not, by comparing the existing prop and state with the nextProps and nextState.

Return Value: This method by default returns true that means the component will re-render and if it returns false then the  render(), componentWillUpdate(), and componentDidUpdate() method does not gets invoked.



Creating React Application:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername

Project Structure: It will look like the following.

Project Structure

Implementation: Write down the following code in the App.js file.

App.js




import React, { Component } from 'react';
import "./styles.css";
class App extends Component {
  constructor() {
    super();
    this.state = {
      value: 0
    }
  }
  
  shouldComponentUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      return true;
    }
    else {
      return false;
    }
  }
  
  render() {
    console.log("Inside render");
    return (
  
      <div className="App">
        <h1>Component : {this.state.value}</h1>
        <button onClick={() => {
          this.setState({ value: this.state.value + 1 })
        }}>Update</button>
      </div>
    );
  }
}
  
export default App;

styles.css




.App {
  font-family: sans-serif;
  text-align: center;
  width: 460px;
  background: green;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Explanation: Above is an example where on clicking the button, the value of state changes. Inside the function shouldComponentUpdate() we are checking whether our current value of state is different from before. If it is different then the function returns true, which means that the component will re-render. In the console, we can see that with each click of the button the message “inside render” occurs as the component is re-rendering again and again. In case, the current value of the state is the same as before then the shouldComponentUpdate() function will return false and the component will not re-render.

Importance of shouldComponentUpdate():

  • It helps in checking whether the re-rendering of components is required or not. If the re-rendering is not required then shouldComponentUpdate do not render the component. For example, if we want our component to not render at some specific condition then shouldComponentUpdate can be of great use.
  • It helps in improving the performance.
  • It increases the responsiveness and optimization of the website



My Personal Notes arrow_drop_up
Recommended Articles
Page :