What does “shouldComponentUpdate” do and why is it important ?
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.
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:
Project Structure: It will look like the following.
Implementation: Write down the following code in the App.js file.
Step to Run Application: Run the application using the following command from the root directory of the project:
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