Evitar re-renders innecesarios con React.memo

No queremos re-renderizar un componente si la data de ese componente no cambió. En muchos casos, un componente se re-renderiza cuando las props cambian.

En este ejemplo, renderizamos un nuevo Title por cada clic en el botón.

Con la función memo, podemos pasar un stateless functional component y estar seguros de que el componente no se actualizará si las props no cambian.

En una class, podemos usar PureComponent.

Y también es posible usar shouldComponentUpdate.

Cuidado: shallowCompare es un legacy add-on. Usa memo o PureComponent.