원시값 비교
number, string, boolean은 값 자체가 같으면 같은 props로 판단됩니다.
prev props{ count: 1 }
shallow compare===
next props{ count: 1 }
참조값 비교
객체, 배열, 함수는 내용이 같아도 새로 만들면 다른 props로 봅니다.
자식 렌더 판단
props가 같다고 판단될 때 memo된 컴포넌트 렌더를 건너뜁니다.
참조 안정화
필요하면 useCallback이나 useMemo로 자식에게 넘기는 참조를 안정화합니다.
얕은 비교 적용 조건
- 부모가 자주 렌더되고 자식 props가 자주 같을 때 효과가 큽니다.
- 매번 새 객체를 넘기면 memo가 있어도 렌더를 건너뛰기 어렵습니다.
- 커스텀 비교 함수는 비용이 커질 수 있으니 단순한 경우에만 씁니다.
참조 안정화
primitive값 비교
object참조 비교
function참조 비교