Learn React Hooks

Preventing unnecessary re-rendering with React.memo

With class components we had shouldComponentUpdate, which would prevent components from re-rendering if the props did not change.

With function components, we can do the same using React.memo, which is a higher-order component. React.memo memoizes the result, which means that it will remember the last rendered result, and, in cases where the props did not change, it will skip re-rendering the component:

const SomeComponent = () => ...export default React.memo(SomeComponent)

By default, React.memo will act like the default definition of shouldComponentUpdate, and it will only shallowly compare the props object. If we want to do a special comparison, we can pass a function as a second argument ...