[[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다
여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다
따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다
사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까?
그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기 때문이다
코드를 통해 확인해보자
이전에는 batching 이 각각의 React event 마다 한 번씩 이루어졌었다
// Before: only React events were batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will render twice, once for each state update (no batching)
}, 1000);
결국 위 코드에서는 각각의 이벤트들마다 렌더링이 되므로, 두 번 렌더링 되었다
setCount()에서 한 번
setFlag()에서 한 번 더
이는 불필요한 렌더링을 야기한다는 점에서 문제를 일으킨다
기존(~React 17)에는 오직 React의 이벤트 핸들러 내부의 state update 작업에 대해서만 batching이 가능했다. 이 말은 Promise, setTImeout, native event handler 내부의 작업은 불가능했었다
React 18버전으로 넘어가면서 리액트 이벤트 핸들러 내부 뿐만 아니라 promises, setTimeout, 여러 native event handler 안에서도 배칭이 적용된다
// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that's batching!)
}, 1000);
이렇게 되면 setTimeout() 안에있는 내용들에 Automatic Batching이 적용되면서 렌더링을 한번만 발생시킨다
발동조건
하지만 언제나 이렇게 되는 것은 아니라는 것을 주의해야 한다
.createRoot() method 를 사용했을때만 automatic batching이 적용된다
만약 이전 레거시인 .render() method 를 사용할 경우 React 18이어도 적용되지 않는다
이 설정을 적용해서 사용하려면? App.js 와 이를 설정하는 index.js 두 파일로 설명을 해보겠다