batching 이란
배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의
리렌더링 (re-render)로 묶는 것을 의미한다.
16ms 안에서 일어나는 state 변경은 성능을 고려하여 한 번에 리렌더링 된다.
예를 들어 React 이벤트 함수 내 state 업데이트를 두 개 이상 가지고 있다면 렌더링을 한 번만 수행한다.
이 과정은 불필요한 리렌더링을 줄이기 때문에 성능에 굉장히 좋다.
React17 vs React18
기존에 react17에서는 Promise, setTimeout, native 이벤트 핸들러, 그리고 여타 모든 이벤트 내부에서 발생하는 업데이트들은 React에서 배칭되지 않았다.
하지만 React 18 부터는 createRoot를 통해, 모든 업데이트들은 어디서 왔는가와 무관하게 자동으로 배칭되게 된다.
React 17, and prior versions only support batching for browser events. However, with the React 18 update, it will introduce an improved version of batching called Automatic Batching.
라고 설명한다. 위에서 설명한 자동으로 배칭되는 걸 Automatic Batching이라고 함을 알 수 있다.
직접 해보니 useEffect를 나열하고 그 안에서 state 업데이트를 하면 배칭이 적용되어 한 번만 렌더링이 된다.
하지만 하나의 useEffect안에서 state 업데이트와 setTimeout을 같이하면 배칭이 적용이 안 되는 것을 확인할 수 있었다.
baching을 막는 방법
ReactDOM.flushSync()를 사용하면 배칭을 막을 수 있다고 한다.
참고자료
https://immigration9.github.io/react/2021/06/12/automatic-batching-react.html
