[Next] React 18 - Automatic Batching

 

 

 

React에서는 set함수를 통해 state를 변경한다. state가 변경되면 리렌더링이 발생한다.

React에서는 성능 최적화를 위해 여러 state를 한 번에 모아서(Batching) 처리한다.
이렇게 하면 불필요한 리렌더링을 줄여 애플리케이션의 성능을 향상시킬 수 있기 때문이다.

React 18 - Automatic Batching

React 18 버전 부터 자동 배치, 이른바 Automatic Batching이 일어난다. 
여러 상태 업데이트를 하나의 리렌더링으로 묶어서 성능을 향상시키는 방법을 의미한다. (일괄 처리한다)

 

'자동 배치 업데이트' 라고 부르며, 이벤트 핸들러 내에서 발생하는 여러 상태 업데이트를 자동으로 하나의 배치로 그룹화하는 기능.

 

리액트 17 이하의 과거 버전의 경우

기존의 리액트 버전에서는 이벤트 핸들러 내부에서는 자동 배치가 이뤄졌었다.  

Promise, setTimeout 같은 비동기 이벤트에서는 자동 배치가 이뤄지고 있지 않았다. 

 

즉, 동기와 비동기 배치 작업에 일관성이 없었고, ReactDOM.unstable_batchedUpdates API를 직접 사용해야 했다.

리액트 18의 경우

루트 컴포넌트를 createRoot를 사용해 만들면 모든 업데이트가 배치 작업으로 최적화할 수 있게 됐다.

import "./index.css";

import App from "./App.jsx";
import ReactDOM from "react-dom/client";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

루트 요소를 document.getElementById("root")로 가져와서, ReactDOM.createRoot를 활용해 렌더링하도록 설정했다.

이렇게 하면 자동 배치가 활성화되어 리액트가 동기, 비동기, 이벤트 핸들러 등에 관계 없이 렌더링을 배치로 수행하게 된다.

 

아래 코드를 실행하는 경우 17 버전에서는 두 번, 18 버전에서는 한 번만 update가 일어난다.

import { Profiler, useCallback, useEffect, useState } from "react";

const sleep = (ms) => {
  return new Promise((res) => setTimeout(res, ms));
};

export default function Test() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const callback = useCallback((id, phase, commitTime) => {
    console.group(phase);
    console.table({ id, phase, commitTime });
    console.groupEnd();
  }, []);

  useEffect(() => {
    console.log("rendered!");
  });

  function handleClick() {
    sleep(3000).then(() => {
      setCount((c) => c + 1);
      setFlag((f) => !f);
    });
  }
  
  return (
    <Profiler id="react18" onRender={callback}>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </Profiler>
  );
}

react18 버전에서의 automatic batching