Use React. Memo to optimize function components

What is?

Memo is an advanced component that optimizes component performance.

Why?

As you all know, for function components, whenever a function is called means that the function component will be re-rendered.

Like a PureComponent, we can check whether the state and props are changed and then decide whether to render again.

To optimize the performance of function components, React provides the Memo higher-order component.

What’s the use?

The first argument to a higher-order component is a function component.

Properties (props) received by the higher-order component are passed to the function component as is.

During rendering, the higher-order components will determine whether the Props are equal based on the shallowEqual algorithm (pass in the second parameter if you want to customize the equality algorithm).

If they are equal and ref does not change, the function component is not rerendered.