title | date | tags | summary | draft | ||
---|---|---|---|---|---|---|
Avoid unnecessary re-renders React.memo |
2018-11-21 |
|
Preventing unnecessary component re-renders in React and various ways to achieve it, including React memo function, PureComponent, and shouldComponentUpdate |
false |
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 pureComponentAnd also is possible to use shouldComponentUpdate
warning: shallowCompare is a legacy add-on. Use memo or PureComponent