Measure First

메모이제이션 적용 기준

React.memo, useMemo, useCallback은 성능 처방이지 기본 장식이 아닙니다.

React.memo

자식 렌더링 제한

props가 같을 때 자식 컴포넌트를 다시 그리지 않게 하되 비교 비용도 함께 확인합니다.

useMemo

계산 결과 보관

정렬, 필터링, 큰 객체 생성처럼 렌더링 중 반복되는 비싼 값을 의존성 기준으로 재사용합니다.

useCallback

함수 참조 안정화

메모된 자식에게 넘기는 콜백이 매번 새로 만들어지는 상황을 줄입니다.

반복 루프

측정, 적용, 재측정을 한 번의 루프로 묶는다

적용 후 렌더 횟수와 사용자 반응이 나아지지 않으면 코드는 단순하게 되돌리는 편이 낫습니다.

성공 신호

Profiler렌더 시간이 줄고 불필요한 커밋이 감소합니다.
deps의존성 누락 없이 필요한 순간에만 값이 갱신됩니다.
UX입력, 스크롤, 클릭 반응이 체감 가능하게 좋아집니다.