Avoid unnecessary re-renders with React.memo

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

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

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

In a class, we can use PureComponent.

It is also possible to use shouldComponentUpdate.

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