자식 컴포넌트 렌더링 차단
부모가 자주 렌더링되지만 자식 props가 같다면 얕은 비교로 다시 그리는 작업을 건너뜁니다.
props 안정
메모화 판단 기준
메모이제이션 선택
부모 렌더링, props 참조 변경, 비싼 계산을 분리하면 React.memo, useMemo, useCallback의 적용 위치가 좁아집니다.
계산 결과 재사용
큰 배열 정렬, 필터링, 객체 생성처럼 렌더링 중 반복되는 비싼 값을 의존성 기준으로 보관합니다.
deps 정확
콜백 참조 고정
메모된 자식에게 넘기는 함수가 매 렌더마다 새로 생겨 props 변경으로 보이는 상황을 줄입니다.
stale 확인
서버 컴포넌트 우선 구조
서버 컴포넌트는 브라우저 상호작용 리렌더링 문제가 아니므로, 불필요한 클라이언트 경계를 만들지 않는 것이 더 큰 최적화입니다.
메모 효과 확인
성공 신호
메모이제이션 위험 신호
Profiler
렌더 시간과 횟수 감소
비교 비용이 더 커짐
deps
필요할 때만 값 갱신
오래된 값이나 함수 사용
UX
입력과 클릭 반응 개선
복잡도만 증가하고 체감 없음