Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
35 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>