What is React.memo?

In React v16.6.0 many new features are released. One of the cool feature is React.memo. memo means memorising. This is performance optimisation feature for function component. React.memo is higher order component. This component is similar to React.PureComponent.

PureComponent is used to skip unwanted rerenderings for class components whereas React.memo is for function components. This feature is very useful to optimise your application. This higher order component will skip rerendering when component receives same props as previous props. We can use memo by wrapping your function component like this

const MemoComponent = React.memo(function MemoComponent(props) {
  /* render using props */
});
OR
export default React.memo(MyFunctionComponent);

React.memo compares props by shallow copy only. React.memo allows us to perform own comparison also. We can also provide our custom comparison function as second argument for React.memo(FunctionComponent, ComparisionFun). Example is provided below

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

I hope this gives you idea of what is React.memo(). Happy coding.