React.memo가 효과 있는 조건

대상 선정

Profiler에서 자주 렌더되고 렌더 비용이 있는 컴포넌트를 고른다.

props 안정화

부모가 넘기는 객체, 배열, 콜백이 매번 새로 생성되는지 확인한다.

memo 적용

같은 props일 때 스킵할 수 있는 순수한 표시 컴포넌트에 감싼다.

결과 비교

commit duration과 렌더 횟수가 줄었는지 기록으로 확인한다.

memo 캐시 후보

비싼 표시 컴포넌트 큰 목록 행, 복잡한 차트, 무거운 계산이 포함된 UI

props 변화가 적어야 함

나쁜 후보

항상 값이 바뀜 매번 새 객체와 콜백을 받거나 context를 직접 소비

memo 비용만 추가

useMemo

값 참조 안정화 계산 결과나 옵션 객체를 의존성 기준으로 재사용

의존성 누락

useCallback

함수 참조 안정화 memo 자식에게 넘기는 이벤트 핸들러 보존

필요할 때만

순수 렌더 · context 영향 · 비교 비용 점검

순수 렌더 같은 props면 같은 화면을 반환한다.

context 영향 memo 내부에서 읽는 context 변경은 여전히 렌더를 일으킨다.

비교 비용 custom compare가 렌더보다 비싸지 않다.

측정 memo 전후 profiler 결과가 실제로 개선됐다.

memo 적용

const ProductRow = memo(function ProductRow({ product, onSelect }) {
  return <button onClick={() => onSelect(product.id)}>{product.name}</button>;
});