Definition of React shouldComponentUpdate()
In react js the function shouldComponentUpdate() is one of the most useful function. It allows us to check and realize if the rendering of the component is needed or not. It always return the boolean value and on the basis of the true and false value, we will render the components. In case we will not use this function then, in that case, the default value will be true. This means it will render the component, we can use the shouldComponentUpdate() for performance improvement, but we should not rely on it for controlling the rendering of the components otherwise it can be difficult to manage.
Syntax:
In the below syntax we are showing a very simple syntax for the shouldComponentUpdate().
shouldComponentUpdate(nextProps, nextState) {
return this.state.stateName != nextState.stateName;
}
How shouldComponentUpdate() Work in React?
Before understanding the working of the function let us understand why we need this function. Suppose we have a certain situation where we do not want to render the component, so in that case, we can use this function. The default behavior of this function is true, which means if we do not pass any things then it will return true, and hence component will execute. This function takes two arguments one is nextprops and another is nextState.By comparing we can decide if it is important to render the component or not. So it allows us to improve the performance of the components. We should always take care while using it, as many people using it for controlling the rendering of the component which is not a good practice.
Examples of React shouldComponentUpdate()
Following are the examples are given below:
Example #1
Below is an example where we are displaying various screens and where on clicking the button we will see the difference count and value of the flag as the true and false. Inside the function shouldComponentUpdate() we are checking if we should render the new value of the counter and the flag. And inside the function clickContermanagement() function we are managing and changing the counter and flag value on each click.
Code:
class Example extends React.Component {
constructor() {
super();
//Initialization of the initial state for the components
this.state = {
flag: true,
numberOfClick: 0
};
//Binding the function to call with this
this.clickCountermanagement = this.clickCountermanagement.bind(this);
}
//Here this is the function which will be used for calculating counters and flag values
clickCountermanagement() {
let flagVal =Math.random() > 0.5
let clickVal =this.state.numberOfClick + 1
this.setState({
flag:flagVal ,
numberOfClick: clickVal
});
}
//Inside this function we will check if we should render components or not. If it returns true then component will render else component will not render .
shouldComponentUpdate(nextProps, nextState) {
return this.state.flag != nextState.flag;
}
render() {
let stringFlag =this.state.flag.toString()
return (
<div className="main-div">
An example for souldComponentUpdate() function
<p>The flag value is :<b>{stringFlag}</b></p>
<p>Number total clicks: <b>{this.state.numberOfClick}</b></p>
<button className="button-class" onClick={this.clickCountermanagement}>
On clicking this button counter and true false will change
</button>
</div>
);
}
}
//Finally attaching all the components with html
ReactDOM.render(
<Example />,
document.getElementById('main')
);
CSS code:
Below is the css code to design the component view for the end users.
.main-div {
margin:2;
background-color:green;
font-size: 18px;
}
.button-class {
background-color:black;
font-size:20px;
font-color:yellow;
}
HTML code:
Below is the HTML code for handling and displaying the component which we have created above.
<body>
<div id="main"></div>
</body>
Output:
Example #2
Below is the simple code of example where we are displaying an input box. Inside the input box, we need to enter the total money we have to buy a mango. Here each mango price is 10 rupees and hence we can only able to buy mango if we have multiple of 10. So this will be checked inside the shouldComponentUpdate() function.
Code:
class Example extends React.Component {
constructor(props) {
//Initializing the initial value for the state of the components .
super(props);
this.state = {
currency: 0
};
//Binding the functions .
this.manageMoneyChange = this.manageMoneyChange.bind(this);
}
//This is the function to calculate the currency
manageMoneyChange(event) {
let x=event.target.value
this.setState({currency: (x)|0});
}
//Here in this function we will decide the rendering of the component
shouldComponentUpdate(props, state){
let ableToBuy =state.currency%10==0
return ableToBuy;
}
render() {
return (
<div>
<div>
<input placeholder="How much money you have ?" className="input-class"type="text" onChange={this.manageMoneyChange} />
</div>
<div>
rupees 10 for each Mango.<br />
you can buy {this.state.currency/10} Mango
</div>
</div>
)
}
}
//This is the main component which will call the Example component
class Main extends React.Component {
render() {
return (
<div className="main-class">
<Example />
</div>
)
}
}
//Finally attaching all the components with html
ReactDOM.render(<Main />, document.getElementById('root'));
CSS code:
Below is the css code to design the component view for the end users.
.main-class {
background-color:red;
padding: 21px;
font-size:18px;
width:50%;
}
HTML code,
Below is the HTML code for handling and displaying the component which we have created above.
1 Online Courses | 5 Hands-on Projects| 18+ Hours| Verifiable Certificate of Completion
4.5
View Course
<div id="root"></div>
Output:
Advantages
There are many advantages of using this function, we can give some of the important points and they are given below.
- With the help of the function shouldComponentUpdate, it will be very easy to check when we have to render the components, and when we do not have to render the components.
- It gives us a better way to manage the performance of the components, as with the help of this we can check our condition if we need to render for particular conditions and not render unnecessary.
- We can stop rendering for particular conditions, it may be possible that the data which we are going to display to the end-user may not be good and we want to stop rendering for that particular change, so we can use this function in that case also.
Recommended Articles
This is a guide to React shouldComponentUpdate(). Here we also discuss the definition and how shouldcomponentupdate() work in react along with different examples and its code implementation. You may also have a look at the following articles to learn more –
