Automatic Batching
Batching이란?
Batching이란 여러 상태 업데이트를 하나의 단일 업데이트로 그룹화하여 처리하는 과정을 말합니다. 이는 성능을 향상시키는 중요한 최적화 기법입니다.
React에서 이벤트 핸들러나 생명주기 메서드(ex : componentDidMount, componentDidUpdate...) 내에서 발생하는 여러 상태 업데이트는 자동으로 배치 처리됩니다.
즉, React는 이들 상태 업데이트를 모아 한 번에 처리하며, 이로 인해 불필요한 리렌더링을 줄일 수 있습니다.
이러한 Batching은 18버전 이전에도 지원이 됐지만 promise, setTimeout등에서는 작동하지 않았다. 이점을 개선해 18버전에서는 promise, setTimeout등에서도 작동하는건 물론 createRoot와 함께 시작하면 모든 업데이트가 자동으로 Batching되도록 하였다.
예시코드 :
// React 18 이전
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React는 마지막에 한 번만 다시 렌더링합니다(배칭입니다!)
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React는 각 상태 업데이트에 대해 두 번 렌더링합니다(배칭 없음)
},1000);
// React18 이후에 타임아웃, 프로미스,
// 네티브 이벤틀 핸들러 혹은 다른 어느 행사도 바칭됩니다.
function handleClick() {
setCount(c => c +1);
setFlag(f=>!f)
// React는 마지막에 한 번만 재렌더링합니다(배칭입니다!)
}
setTimeout(()=>{
setCount(c=>c+1);
setFlag(f=>!f)
//React는 마지막에 한 번만 재렌더링합니다(배칭입니다!)
},1000);
자동 배치 처리를 선택 취소하려면 flushSync를 사용할 수 있습니다:
import { flushSync } from 'react-dom';
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React는 이 시점까지 DOM을 업데이트했습니다.
flushSync(() => {
setFlag(f => !f);
});
// React는 이 시점까지 DOM을 업데이트했습니다.
}