props 안정성 기준 React.memo 적용/회피 결정도

렌더 비용 확인

Profiler로 해당 컴포넌트가 자주, 오래 렌더링되는지 먼저 본다.

measure

매번 새 객체, 배열, 함수가 전달되면 memo 비교가 매번 실패한다.

identity

필요한 경우 useMemo, useCallback, 컴포넌트 분리로 props를 안정화한다.

stabilize

memo 적용 뒤 실제 commit time과 렌더 횟수가 줄었는지 확인한다.

verify

적용

큰 리스트 항목이나 비싼 시각화처럼 렌더 비용이 큰 컴포넌트에 맞다. 부모가 자주 렌더돼도 props가 같으면 이득이 생긴다.

good fit

회피

작고 단순한 컴포넌트에는 비교 비용과 코드 복잡도가 더 클 수 있다. 성능 증거 없이 습관처럼 감싸면 유지보수만 나빠진다.

avoid ritual

비교 함수 비용

커스텀 비교 함수는 빠르지 않으면 병목을 옮기는 결과가 된다. 깊은 비교는 렌더보다 비쌀 수 있다.

compare cost

증거 Profiler 전후 수치가 PR 설명에 남아 있다.

props 객체와 콜백 참조가 불필요하게 새로 만들어지지 않는다.

정확성 memo 뒤에도 상태 변화와 context 변화가 화면에 반영된다.

memo benefit = skipped render cost - props comparison cost
apply only when benefit is visible