Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
ReactJS – shouldComponentUpdate() method
In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.
This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.
Syntax
shouldComponentUpdate(nextProps, nextState)
By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.
Example 1
In this example, we will build a React application with components only getting re-rendered if the props passed to them changes.
Our first component in the following example is App. This component is the parent of the MyComp component. We are creating MyComp separately and just adding it inside the JSX tree in our App component. Only the App component needs to be exported.
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { color: '#000' };
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
<button onClick={() => this.setState({ color: '#ff0000' })}>
Change Color
</button>
<MyComp />
</div>
);
}
}
class MyComp extends React.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('MyComp component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;Output
In the above example, MyComp component gets re-rendered only if the received props and the previous props are different. The above code will generate the following result −
Example 2
In the next example, we are going to execute the same code without shouldComponentUpdate() method to see the difference.
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { color: '#000' };
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
<button onClick={() => this.setState({ color: '#ff0000' })}>
Change Color
</button>
<MyComp />
</div>
);
}
}
class MyComp extends React.Component {
render() {
console.log('MyComp component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;Output
Here, MyComp component gets re-rendered every time when the parent component, i.e., the App component gets re-rendered. The above code will generate the following result −
2K+ Views
To Continue Learning Please Login