shouldComponentUpdate example

The shouldComponentUpdate life-cycle method is invoked in the update phase before the render(). This method will be invoked when the component receives new state or props, this method can be used to prevent re-rendering of the component. If shouldComponentUpdate returns false then render() will not be triggered. By default render() will be called for any state change, this method can be used to override the default behavior and prevent re-rendering of the component.

The following example uses shouldComponentUpdate() to check the value of the state "counter", compares the previous value of the state and the current value of the state in the shouldComponentUpdate method and return true only when the state value is changed, this will trigger render(). If the state value of counter did not change it returns false and render() will not be called. We can check if render is called by looking at the console, since 'Render called.' is written to the console whenever render() is triggered.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class HelloShouldComponentUpdate extends Component {
  constructor(props) {
super(props);
this.state = {
counter: 0,
unUsedState: 0
};
this.onIncrementClick = this.onIncrementClick.bind(this);
this.onNoopClick = this.onNoopClick.bind(this);
}

onNoopClick() { 
this.setState({unUsedState: Math.random()});
}

onIncrementClick() { 
this.setState({counter: this.state.counter + 1});
}

shouldComponentUpdate(nextProps, nextState) {
if (nextState.counter !== this.state.counter)
return true;
else
return false;
}

render() {
console.log('Render called.');
return (
      <div>
        <div>Count: {this.state.counter}</div>
        <div><button onClick={this.onIncrementClick}>Increment</button>
        <button onClick={this.onNoopClick}>No-op</button></div>
      </div>
);
}
}

ReactDOM.render(<HelloShouldComponentUpdate />, document.getElementById('app'));