React Component Lifecycle - shouldComponentUpdate

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.

This method has access to this.state, nextState, this.props & nextProps, hence we can compare current state/props with next state/props and make a decision if we have to prevent re-rendering of the component. The purpose of this method is to help in preformance optimization by preventing re-rendering of components on specific conditions.

Below is the syntax for shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
    if (condition for not updating the component)       
        return false;
else // condition for updating the compnent
return true;
}