• React 트리 내에 어디서나 추가 가능
• 트리의 특정 부분 렌더링 비용 계산
• id(string)와 onRender(callback function)이 필요

onRender 콜백 인자

• id : 여러 Profiler를 사용하고 있을 때 식별하기 위해 사용(필수)

• phase : mount 와 update 의 enum 값을 받음. 여러번의 리랜더링 중에서 마운트된 상태와 리랜더링된 상태를 구분

• actualDuration : Profiler로 감싸고 있는 컴포넌트를 렌더링하는데 걸리는 시간

  메모이제이션을 잘 활용하고 있다면 phase가 update 상태일 때 값이 현저히 줄어들어야

• baseDuration : 해당 컴포넌트가 가질 수 있는 최악의 케이스를 계산

  즉 아무런 메모이제이션이 없을 때 랜더링 시간을 알려줌.

  리팩토링 이후 컴포넌트가 얼마나 개선이 이루어졌는지 확인할 때 유용

• startTime : 랜더링을 시작한 시간에 대한 타임 스탬프

• commitTime : 최초 랜더링 이후 state의 변화로 인하여 새로운 업데이트를 커밋한 시간의 타임스탬프

• interaction : 컴포넌트의 업데이트가 스케줄될 때 사용되는 interaction 들을 추적

장점

• useCallback이나 useMemo 등의 효과를 바로 확인

주의사항

• 가벼운 컴포넌트이지만 애플리케이션에 CPU와 메모리 비용을 추가합니다.

• 어플리케이션에 여러 개의 root가 있으면 프로파일링 후에 다음의 오류가 발생할 수 있습니다. No profiling data has been recorded for the selected root.

  • (React DevTools)

  이 경우 elements 패널에서 다른 root를 선택하여 해당 root에 대한 프로파일링 정보를 봅니다.

• commit이 너무 빨라서 React Profiler가 의미있는 정보를 얻지 못할 수도 있습니다.

  이 경우 다음의 오류가 발생합니다. No timing data to display for the selected commit.

  • (React DevTools)