React 16.5 프로파일러를 실무에 적용해본 후기

배경

관리자 대시보드의 테이블 컴포넌트가 데이터가 많아질수록 느려진다는 피드백을 받았다. 개발 환경에서는 체감이 안 됐는데, 실사용자 환경에서는 문제가 있는 것 같았다.

React 16.5에서 추가된 Profiler API를 활용해 실제 사용자 환경의 성능 데이터를 수집하기로 했다.

Profiler 적용

import React, { Profiler } from 'react';

const onRenderCallback = (id, phase, actualDuration) => {
  if (actualDuration > 16) {
    analytics.track('slow_render', {
      component: id,
      phase,
      duration: actualDuration
    });
  }
};

function AdminTable() {
  return (
    <Profiler id="AdminTable" onRender={onRenderCallback}>
      <DataTable data={data} />
    </Profiler>
  );
}

16ms 이상 걸리는 렌더링만 수집하도록 했다. 60fps 기준이다.

발견한 문제

1주일간 데이터를 모아보니 handleRowClick 핸들러가 매번 새로 생성되면서 모든 row가 리렌더링되고 있었다. useCallback으로 메모이제이션 처리했다.

const handleRowClick = useCallback((id) => {
  setSelectedId(id);
}, []);

아직 Hooks는 프로덕션에 쓰기 이른 감이 있지만, 이런 케이스에는 확실히 편하다.

결과

평균 렌더링 시간이 45ms에서 8ms로 개선됐다. Profiler API는 프로덕션 번들에서 자동으로 제거되지 않으니 feature flag로 제어하도록 구성했다.

실제 사용자 환경의 성능 데이터를 얻을 수 있다는 점이 가장 큰 장점이었다.