React. Batch(일괄 처리)

일괄 처리란 무엇일까?

• React의 성능 향상을 위해 여러 상태에 대한 업데이트를 단일 리-렌더링으로 그룹화하는 것을 말한다.
• 이는 불필요한 리-렌더링을 방지할 수 있으며, 다음 아래의 코드를 통해 설명하도록 한다.

동일한 클릭 이벤트 내에 두 개의 상태 업데이트가 있는 경우, 클릭할 때마다 하나의 리-렌더링으로
일괄 처리하는 걸 알 수 있다.

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

  function handleClick() {
    setCount(c => c + 1); 
    setFlag(f => !f); 
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

React의 Batching 처리에 대한 큰 변화는 React 18 version이전과 이후라고 말할 수 있다.

React 18 version 이전

• React는 일괄 업데이트 시기에 대해 일관성이 없다.
• Promise, setTimeout, 기본 이벤트 핸들러 또는 기타 이벤트 내부의 업데이트는 기본적으로 React에서 일괄 처리되지 않았습니다.
• 예를 들어, 데이터를 가져온 다음 상태를 업데이트해야 하는 경우 handleClick은 업데이트를 일괄 처리 하지 않고 두 개의 독립적인 업데이트를 수행하는 걸 알 수 있다.
• 아래의 코드를 실행해보면 re-renderning이 두 번 발생하는 걸 볼 수 있다.

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

  function handleClick() {
    fetchSomething().then(() => {
      setCount(cnt => cnt + 1); // 리-렌더링 발생
      setFlag(f => !f); // 리-렌더링 발생
    });
  }
  console.log("re-rendering 발생")

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

React 18 version 이후

• React 18부터 시작하여 createRoot모든 업데이트는 출처에 관계없이 자동으로 일괄 처리됩니다.
• promise, setTimeout, native event handelr 등 다른 이벤트에 대해서 batch가 된다.

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

  function handleClick() {
    fetchSomething().then(() => {
      setCount(cnt => cnt + 1);
      setFlag(f => !f);
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

• 만약, batch를 원하지 않는다면 flushSync()를 사용할 수 있습니다.

import { flushSync } from 'react-dom'; 

function handleClick() {
  flushSync(() => {
    setCounter(cnt => cnt + 1);
  });

  flushSync(() => {
    setFlag(f => !f);
  });

}