행동 고정
검색 입력, 탭 전환, 체크박스 클릭처럼 하나의 재현 행동을 정한다.
렌더 기록
Profiler에서 commit 시간과 다시 렌더된 컴포넌트를 확인한다.
원인 분리
부모 렌더, context 변경, prop 참조 변화, state 위치를 차례로 좁힌다.
개선 검증
상태 이동이나 memo 적용 뒤 같은 행동의 기록을 비교한다.
State colocation
영향 범위 축소
작은 입력 state를 큰 페이지 위쪽에 두지 않음
가장 먼저 볼 후보
Stable props
참조 안정성
memo 자식에게 매번 새 객체와 함수를 넘기지 않음
필요할 때 useMemo/useCallback
Context split
전파 범위 제한
자주 바뀌는 값과 거의 안 바뀌는 값을 분리
Provider value 안정화
Memo
렌더 스킵
비싼 컴포넌트가 같은 props로 다시 렌더될 때 효과
무조건 적용 금지