Profiler는 react 애플리케이션이 렌더링하는 빈도와 렌더링 비용을 측정한다. Profiler의 목적은 메모이제이션 같은 성능 최적화 방법을 활용할 수 있는 애플리케이션의 느린 부분들을 식별해내는 것.

💡 사용: 중첩, 중복으로도 사용 가능 (가볍지만 필요한 곳에 사용)

• 중첩

render(
  <App>
    <Profiler id="Panel" onRender={callback}>
      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>
          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={callback}>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>
);
주의사항

• 복수사용

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Profiler id="Main" onRender={callback}>
      <Main {...props} />
    </Profiler>
  </App>
);

onRender 콜백

React는 프로파일 트리 내의 컴포넌트에 업데이트가 “커밋”될 때마다 이 함수를 호출한다.

function onRenderCallback(
  id, // 방금 커밋된 Profiler 트리의 "id"
  phase, // "mount" (트리가 방금 마운트가 된 경우) 혹은 "update"(트리가 리렌더링된 경우)
  actualDuration, // 커밋된 업데이트를 렌더링하는데 걸린 시간
  baseDuration, // 메모이제이션 없이 하위 트리 전체를 렌더링하는데 걸리는 예상시간 
  startTime, // React가 언제 해당 업데이트를 렌더링하기 시작했는지
  commitTime, // React가 해당 업데이트를 언제 커밋했는지
  interactions // 이 업데이트에 해당하는 상호작용들의 집합
) {
  // 렌더링 타이밍을 집합하거나 로그...
}

• id: string - 방금 커밋된 Profiler의 id prop. 구분자로 사용
• phase: “mount” | “update” - 해당 트리가 방금 마운트된 건지 prop, state 혹은 hooks의 변화로 리렌더링 된 건지 식별
• actualDuration: number - 현재 업데이트에 해당하는 Profiler와 자손 컴포넌트들을 렌더하는데 걸린 시간은 하위 트리가 얼마나 메모이제이션을 잘 활용하는 지를 나타낸다.(e.g. React.memo, useMemo, shouldComponentUpate) 이상적으로 대다수의 컴포넌트는 특정 prop이 변할 경우에만 리렌더링이 필요하기 때문에 초기 렌더링 이후에는 감소해야 한다.
• baseDuration: number - Profiler 트리 내 개별 컴포넌트들의 가장 최근 render 지속시간. 이 값은 렌더링 비용의 최악 케이스를 계산해준다.(e.g. 초기 마운트 혹은 메모이제이션 없는 트리)
• startTime: number - React가 현재 업데이트에 대해 렌더링을 시작한 시간의 타임 스탬프.
• commitTime: number - React가 현재 업데이트를 커밋한 시간의 타임 스탬프 값. 모든 프로파일러들이 공유하기 때문에 원한다면 그룹을 지을 수 있다.
• interactions: Set - 업데이트가 계획되었을 때 추적하고 있던 “상호작용”의 집합(e.g. render 혹은 setState가 호출되었을 때)