트리 선택
화면에서 문제가 있는 요소를 선택해 대응 컴포넌트를 찾는다.
값 확인
props, state, hook 값이 예상과 다른 시점을 비교한다.
프로파일 기록
사용자 행동을 한 번 수행하며 어떤 컴포넌트가 얼마나 오래 렌더됐는지 기록한다.
원인 분리
context 변경, 부모 렌더, prop identity 변화 중 어느 것이 영향을 주는지 좁힌다.
Props
외부 입력 확인
부모가 넘긴 값과 콜백 identity를 확인
memo 실패 원인 추적
Hooks
내부 상태 확인
useState, useReducer 값이 이벤트 후 바뀌었는지 확인
hook 순서는 변경 금지
Profiler
렌더 비용 측정
commit별 duration과 렌더된 컴포넌트 목록 확인
개발 모드 비용은 운영과 다름
Highlight
시각적 렌더 감지
불필요하게 깜박이는 영역을 빠르게 찾음
원인 확정은 profiler로