함수형 컴포넌트에는 life cycle이 존재하지 않기 때문에 shouldComponentUpdate를 이용한 최적화가 불가능 했다.

하지만 memo를 이용하여 React.PureComponent 와 유사한 기능을 한다. props가 변경되는 경우에만 rerendering 한다.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

OR

const MyComponent = (props) => (
	/* render using props */
)

export default React.memo(MyComponent);

아래와 같이 두번째 인자에 비교 함수를 추가하면 비교를 제어할 수 있다.

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);