Avoid unnecessary re-renders React.memo

We don't want to re-render a component if the data for that component has not change. In many cases a component re-render when the props change.

In this example we render a new Title for every click in the button.

With React memo function we can pass a stateless functional component and we can be sure that the component will not update if the props does not change.

In a class we can use pureComponent

And also is possible to use shouldComponentUpdate

warning: shallowCompare is a legacy add-on. Use memo or PureComponent