Automatic batching

Automatic batching

batching이란 업데이트 대상이 되는 상태값들을 하나로 묶어 한번의 리렌더링에 업데이트가 모두 진행되도록 해주는 것을 의미한다.

const handleClick = () => {
  setCount(prev => prev + 1);
  setFlag(prev => !prev);
  // 오직 한번만 리렌더링
}

• 하나의 함수 내에서 setState를 여러번 호출해도 리렌더링은 한 번만 발생한다.

• 함수의 끝에서 업데이트 되며 리엑트는 마지막에 한번 리렌더링을 시킨다.

• 여러번의 불필요한 리렌더링을 방지하기 때문에 성능에 이점이 있다.

v18 이전 버전에서도 batch update가 지원 되었지만 클릭과 같은 브라우저 이벤트에서만 적용이 가능했고 api 호출 콜백함수나 timeout 함수에서는 작동하지 않았다.

const handleClick = () => {
  somethingFetch().then(() => {
    setCount(prev => prev + 1); // re-render 1
    setFlag(prev => !prev); // re-render 2
  }) 
}

setTimeout(() => {
  setCount(prev => prev + 1); // re-rend er 1
  setFlag(prev => !prev); // re-render 2
});

React 18에서의 Batching

• 이벤트 핸들러 밖에서도 동작하도록 변경되었다.

• 필요할 때 bach 업데이트를 제외시킬 수 있는 기능이 추가 되었다.

batch 업데이트를 하지 않으려면?

일반적인 상황에서는 일괄 처리가 안전하지만, 일부 코드는 상태 변경 직후 DOM에서 무언가를 읽는데 의존할 수 있다. 이러한 경우 ReactDOM.flushSync() 를 사용하여 일괄 처리를 옵트아웃 시킬 수 있다.

import { flushSync } from 'react-dom';

const handleClick = () => {
  flushSync(() => {
    setCount(prev => prev + 1); // re-render
  })
  
  flushSync(() => {
    setFlag(prev => !prev); // re-render 2
  })
}