React 18 Alpha의 Automatic Batching 동작 확인

배경

팀 내부에서 React 18 알파 테스트를 진행하기로 했다. 특히 Automatic Batching이 실제로 얼마나 렌더링 횟수를 줄여주는지 궁금했다.

React 17의 한계

기존에는 React 이벤트 핸들러 내부에서만 batching이 동작했다. Promise, setTimeout 내부의 setState는 각각 렌더링을 발생시켰다.

function handleClick() {
  fetchData().then(() => {
    setCount(c => c + 1);  // 렌더링 1
    setFlag(true);         // 렌더링 2
  });
}

React 18의 변화

Alpha 버전을 설치하고 createRoot로 마이그레이션했다.

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

동일한 코드가 이제 자동으로 batching 된다. 측정 결과 Promise 내부의 여러 setState가 한 번의 렌더링으로 처리됐다.

성능 측정

React DevTools Profiler로 측정한 결과:

• React 17: 평균 4회 렌더링
• React 18: 평균 1회 렌더링

복잡한 form 페이지에서 체감 성능이 향상됐다.

주의사항

Batching을 원하지 않는 경우 flushSync를 사용할 수 있다. 하지만 대부분의 경우 필요 없었다.

알파 단계라 프로덕션 적용은 보류했지만, 정식 출시 시 마이그레이션 계획을 세울 만한 가치가 있다고 판단했다.