React18

Batching

• 리액트가 더 나은 성능을 위해 여러개의 state(상태) 업데이트를 하나의 re-render가 발생하도록 그룹화 하는 것

React 18 이전 버전에서는 사용자 이벤트에 대한 상태 변경은 일괄처리(Batching)로 되었다.

setState를 여러번 호출해도 일괄적으로 처리가 돼서 리 렌더링이 한 번만 발생을 했다

ex) 하나의 클릭 이벤트 안에 두 State의 업데이트를 하는 경우에 React는 이런 작업을 하나의 렌더링으로 일괄 처리를 했다.
아래 코드는 state를 두 번 변경하지만 한 번의 렌더링을 수행한다.

import React, { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [bool, setBool] = useState(false);

  const handleState = () => {
    setCount((num) => num + 1); // 아직 리렌더링 X
    setBool(!bool); // 아직 리렌더링 X
    // React는 함수가 끝나면 리렌더링을 한다 (-> 이것이 배칭)
  };
  return (
    <div>
      <button onClick={handleState}>Next</button>
      <span style={{ color: bool ? "red" : "black" }}>{count}</span>
    </div>
  );
};

export default MyComponent;

이런 과정은 불필요한 리렌더링을 줄이기 때문에 성능에 좋다. 그리고 컴포넌트가 반만 완료된 state를 렌더링하는 것을 방지해서 버그를 미리 예방할 수가 있다.

하지만 React는 배칭 시점에 대한 일관성이 없었다.
비동기로 데이터를 가져온 후 handleState() 함수 내부에서 state를 업데이트할 경우 React는 업데이트를 배칭(일괄 처리) 하지 않고 두 개의 독립적인 업데이트를 수행한다.

작성중

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching