Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
34 lines (22 sloc) 1.68 KB
title author layout lang ref permalink path tags
Avoid unnecessary re-renders React.memo
Marcelo Carmona
post
en
avoid-unnecessary-re-renders-react-memo
avoid-unnecessary-re-renders-react-memo
2018-11-21-avoid-unnecessary-re-renders-react-memo.md
React
JavaScript

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.

<iframe src="https://codesandbox.io/embed/n3x3rvxvy0" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> 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.

<iframe src="https://codesandbox.io/embed/1omq1wvzr4" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

In a class we can use pureComponent

<iframe src="https://codesandbox.io/embed/40jlzo1810" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

And also is possible to use shouldComponentUpdate

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

<iframe src="https://codesandbox.io/embed/k53m503975" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
You can’t perform that action at this time.