변경이 시작되는 곳
부모 state 변경
Context value 변경
새 객체 또는 함수 props 전달
변경 지점과 렌더 범위를 따로 본다
리렌더링 자체는 정상 동작입니다. 문제는 관련 없는 자식까지 매번 다시 실행되면서 계산과 비교 비용이 커지는 상황입니다.
렌더가 퍼지는 범위
부모 함수가 다시 실행되면 자식도 기본적으로 다시 호출됩니다. 값이 같더라도 참조가 달라지면 얕은 비교에서 변경으로 보입니다.
범위를 줄이는 선택
상태를 필요한 컴포넌트 가까이 둠
무거운 자식은 React.memo로 보호
참조 props는 useCallback/useMemo로 안정화
Highlight updates
깜빡이는 범위
변경과 무관한 영역까지 표시되는지 확인합니다.
Profiler
커밋 시간
실제 비용이 사용자 동작에서 반복되는지 봅니다.
Code shape
구조 단순성
memo보다 상태 이동이 더 명확한 경우를 구분합니다.