React 18 Beta의 Automatic Batching 동작 확인

배경

React 18 Beta가 6월에 공개된 이후 사이드 프로젝트에 적용해보고 있다. 가장 눈에 띄는 변화 중 하나가 Automatic Batching이었는데, 실제로 어떻게 동작하는지 확인해봤다.

React 17까지의 배칭

React 17에서는 이벤트 핸들러 내부의 여러 setState만 자동으로 배칭되었다.

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 한 번만 리렌더링
}

fetch('/api/data').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 두 번 리렌더링됨
});

비동기 콜백이나 네이티브 이벤트에서는 배칭이 되지 않아 불필요한 리렌더링이 발생했다.

React 18의 변화

React 18부터는 모든 상황에서 자동 배칭이 적용된다.

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18에서는 한 번만 리렌더링
}, 1000);

fetch('/api/data').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 역시 한 번만 리렌더링
});

배칭 방지가 필요한 경우

드물지만 의도적으로 배칭을 막아야 하는 경우 flushSync를 사용할 수 있다.

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(c => c + 1);
});
// 여기서 DOM 업데이트 완료
setFlag(f => !f);

실무 적용 고려사항

아직 Beta 단계라 프로덕션 적용은 보류 중이다. 하지만 대부분의 경우 Breaking Change 없이 성능 개선 효과를 얻을 수 있을 것으로 보인다. Concurrent Features와 함께 정식 릴리즈되면 점진적으로 마이그레이션할 계획이다.