불필요한 리렌더링의 실제 원인

증상 측정

Profiler로 느린 commit과 자주 렌더되는 컴포넌트를 분리한다.

props와 context value가 실제로 바뀌었는지 참조 단위로 확인한다.

한 영역만 쓰는 상태는 해당 영역 가까이 내려 영향 범위를 줄인다.

비용이 확인된 컴포넌트에만 memo, useMemo, useCallback을 사용한다.

Inline object

매 렌더 새 참조 style, options, columns 배열이 memo 비교를 실패시킴

useMemo 또는 외부 상수

Inline handler

함수 identity 변화 자식이 memoized일 때 불필요한 변경으로 보임

useCallback 남용

Context value

넓은 전파 {user, setUser} 객체를 매번 새로 만들면 소비자가 다시 렌더

provider 분리 가능

State height

상태가 너무 위에 있음 작은 입력 변화가 큰 페이지를 다시 실행

상태 colocate

측정 후 최적화 느낌이 아니라 profiler 기록으로 대상을 고른다.

참조 안정성 memo된 자식에게 매번 새 객체를 넘기지 않는다.

상태 범위 입력값 하나가 전체 route를 다시 실행시키지 않는다.

비용 대비 메모 코드가 계산 비용보다 더 복잡해지지 않는다.