원문 : https://goongoguma.github.io/2021/09/22/Use-React.memo()-wisely/

Use React.memo()

사용자들은 빠르고 반응형으로 만들어진 UI를 좋아합니다. 100 밀리초 미만의 UI응답은 순식간이지만 100에서 300 밀리초 사이의 지연은 인지가 가능합니다.

UI 성능을 향상시키기 위해서, 리액트는 고차함수(HOC)인 React.memo()를 제공합니다. React.memo()가 컴포넌트를 감싸게 되면, 리액트는 감싸여진 컴포넌트의 렌더된 결과물을 메모리에 기억하고 있음으로써(memoize) 불필요한 렌더링을 건너뜁니다.

React.memo()

DOM을 업데이트 하기로 결정하였다면, 첫번째로 리액트는 컴포넌트를 렌더한뒤, 전에 렌더된 결과들과 비교를 합니다. 만약에 렌더된 결과들이 다르다면, 리액트는 DOM을 업데이트 합니다.

현재 vs 전의 렌더 결과물의 비교는 빠릅니다. 하지만 어떤 상황에서는 이러한 비교 속도를 더 향상시킬 수 있습니다.

컴포넌트가 React.memo()로 감싸여 있을때, 리액트는 컴포넌트를 렌더하고 결과를 메모리에 저장합니다(메모이제이션). 다음 렌더가 시작되기 전에, 만약 새로운 props의 값이 같다면, 리액트는 메모리에 저장되어있는 결과물을 재사용하고 다음 렌더링을 건너뜁니다.

사용 예

export시 React.memo로 컴포넌트를 감싸줍니다.

export default React.memo(TodoItem);

export시 React.memo로 컴포넌트를 감싸고 다른 이름으로 내보냅니다.

function Logout({ username, onLogout }) {
  return (
    <div onClick={onLogout}>
      Logout {username}
    </div>
  );
}

const MemoizedLogout = React.memo(Logout);