TL;DR React.memo() 언제 사용할까?

TL;DR 같은 props로 렌더링이 자주 일어나는 컴포넌트

// Initial render
<MovieViewsRealtime
  views={0}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 1 second, views is 10
<MovieViewsRealtime
  views={10}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 2 seconds, views is 25
<MovieViewsRealtime
  views={25}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

위의 예시에서 views를 제외한 title, releaseDate를 포함한 component를 만들고 memo로 감싸면 효율적이다.
props가 전부다 계속해서 변경되는 경우라면 사용하지 말자. 함수를 인자로 넘길경우 useCallback을 사용하자.

 

https://ui.toast.com/weekly-pick/ko_20190731

React.memo() 현명하게 사용하기