React 18 Beta의 Automatic Batching 동작 확인

배경

회사 프로젝트에서 React 18 마이그레이션을 검토하면서 Beta 버전을 테스트해볼 기회가 생겼다. 가장 눈에 띄는 변경사항은 Automatic Batching이었다.

React 17의 Batching 제한

기존에는 React 이벤트 핸들러 내부에서만 배칭이 동작했다. Promise, setTimeout 내부의 상태 업데이트는 각각 리렌더링을 발생시켰다.

function handleClick() {
  fetchData().then(() => {
    setCount(c => c + 1); // 리렌더링
    setFlag(f => !f);      // 또 리렌더링
  });
}

React 18의 변화

React 18에서는 어디서든 상태 업데이트가 자동으로 배칭된다.

function handleClick() {
  fetchData().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 두 업데이트가 하나의 리렌더링으로 처리됨
  });
}

실제로 간단한 테스트 컴포넌트를 만들어 확인해봤다. setTimeout 내부에서 3개의 상태를 업데이트했을 때 React 17은 3번, React 18은 1번 렌더링되는 것을 콘솔로 확인했다.

주의사항

만약 즉시 DOM 업데이트가 필요한 경우 flushSync를 사용할 수 있다.

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(c => c + 1);
});
// DOM이 즉시 업데이트됨
setFlag(f => !f);

성능 개선이 체감될 만한 변경이라 정식 릴리즈가 기대된다.