shouldComponentUpdate Avoid Heavy Re-render
React component re-render every time the props or state change, so imagine having to render the entire page every time there in an action, that takes a big load on the browser, that's where shouldComponentUpdate comes in, whenever React is rendering the view it checks to see if shouldComponentUpdate is returning false/true, so whenever you have a component that is static let do yourself a favor and return false or if not let check to see if the props/state has changed.
Let take a look the below example.
This component above has no state which causes it to re-render every time. So what we want is to convert it to a regular component and use the function shouldComponentUpdate. Then we want to check if the props that we use in this component have change. If there was a change return true else return false. The component becomes.