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 to React.memo:
export default React.memo(SomeComponent, (prevProps, nextProps) => {
// compare props and return true if the props...