메모화 판단 기준

React.memo는 네 가지 질문을 통과할 때 남긴다

memo는 props가 안정적이고 렌더 비용이 클 때 효과가 납니다. 반대로 값이 자주 바뀌거나 컴포넌트가 가벼우면 비교 비용만 추가됩니다.

01 profile

병목이 측정됐나

Profiler에서 느린 컴포넌트나 불필요한 렌더가 확인됐는지 봅니다.

아니면 먼저 측정
02 cost

렌더 비용이 큰가

복잡한 UI, 큰 목록, 무거운 계산을 포함할 때 후보가 됩니다.

가벼우면 보류
03 props

props가 자주 안 바뀌나

같은 입력이 반복될수록 얕은 비교로 렌더를 건너뛸 수 있습니다.

자주 바뀌면 효과 낮음
04 reference

참조가 안정적인가

함수, 객체, 배열 props는 새로 만들면 memo가 계속 깨집니다.

필요 시 useCallback, useMemo
사용한다

측정된 병목이고 props가 대부분 유지되며 렌더 비용이 큽니다.

먼저 구조를 본다

상태 위치를 낮추거나 컴포넌트 책임을 나누는 편이 더 단순할 수 있습니다.

사용하지 않는다

props가 매번 바뀌거나 렌더가 매우 가벼우면 비교 비용이 더 큽니다.