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

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

Prerequisites:

• NPM & Node.js
• React JS shouldComponentUpdate()
• React JS
• React JS Lifecycle methods

What Does “shouldComponentUpdate” do?:

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

Syntax:

shouldComponentUpdate(nextProps, nextState)

Parameters:

It accepts two parameters named nextProps and nextState. The shouldComponentUpdate 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 which means the component will re-render and if it returns false then the render(), componentWillUpdate(), and componentDidUpdate() method does not get invoked.

Approach:

To implement 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.

Steps to Create 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:

Project Structure

Example: This example show the usage of shouldComponentUpdate by changing the state when the button is clicked.

Javascript

// Filename - 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;

CSS

/* Filename - App.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:

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