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.

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