[React] Automatic Batching 이란?

Automatic Batching이란 리액트 18 버전 이후 개선된 기능 중 하나이다.

 

Batching : 소프트웨어의 성능을 향상 시키기 위해 리엑트에서 여러개의 state의 업데이트를
일괄적으로 처리하는(리 렌더링) 기능을 의미한다.

 

예를 들어 하나의 이벤트 안에 두 개의 state 업데이트를 가지는 경우, React에서는 항상 이런 작업을

하나의 렌더링으로 일괄 처리하였다. 

 

다음 예제를 보면 state는 두 번 변경하지만 React는 한 번의 렌더링만 수행한 것을 확인할 수 있다. 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  //handleClick 함수  안에서 배칭이 일어남
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1); // 여러 번 호출되어도 배칭이 발생함
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

 

 

이 과정은 불필요한 리 렌더링을 줄이기 때문에 성능에는 매우 좋지만
React는 업데이트 배칭 시점에 대한 일관성이 없었다.

 

예제를 보면 비동기 함수인 setTimeout 내부에서 상태를 업데이트 하기 때문에 콜백 함수가 이벤트 큐에 들어가게 된다.

이로 인해 "setCount"가 즉시 호출되는 것이 아니라 이벤트 루프를 통해 나중에 호출되므로 배칭이 발생하지 않게 된다. 

 

// react 18 이전 이벤트 핸들러 밖에서 발생하는 state 업데이트 ( 배칭이 일어나지 않음 )

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1); // setTimeout 내부에서 실행되므로 배칭이 발생하지 않음
    }, 0);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

 

이렇게 일괄적이지 못 했던 이유는 React가 클릭과 같은 브라우저 이벤트의 업데이트만 배칭을 사용해왔기 때문이다.

 

React 18 버전 이전 까지는 Promise, setTimeout, native event handlers,

다른 모든 이벤트 내부에서 발생하는 업데이트들은 React에서 배칭되지 않았다.

 

하지만 React 18 버전 이후로는 createRoot를 통해 어떤 이벤트에서 왔는지와 상관없이 모든 업데이트들이

자동 배칭(Automatic Batching)된다.

 

단, 레거시 render를 사용할 경우 자동 배칭이 적용되지 않는다.

state변경함수 실행마다 재렌더링시키고 싶으면 flushSync 함수를 사용하자!

 

// react 18 이후 부터는 이벤트 핸들링이 끝나고 콜백이 끝나면 배칭이 일어난다.(재 렌더링)


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1); // setTimeout 내부에서 실행되므로 배칭이 발생하지 않음
    }, 0);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

 

 

참고한 글 :

 https://github.com/reactwg/react-18/discussions/21

Automatic batching for fewer renders in React 18 · reactwg react-18 · Discussion #21

https://nyol.tistory.com/146

[React] React 18 - Automatic Batching