React Batching

Batching 이란

---

Batching이란 React가 더 나은 성능을 위해 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 의미한다. React 17버전에는 이 전에는 이벤트 핸들러 내부에서만 batching 프로세스가 동작하고 promise의 then 콜백내부, setTimeout에서는 batching 되지 않는다.

Batching 장점

---

• 여러개의 state 업데이트마다 발생하는 불필요한 리렌더링을 막아준다.

React17 Batching 예제

---

• 결과
  이벤트 핸들러 안에서는 batching 이 작동하여 2가지의 상태 변경이 일어나도 render가 한 번만 출력되고 있다. 하지만 setTimeout, Promise, async 에서는 batching이 작동되지 않아 render가 두 번씩 출력되고 있다.

React18 Batching

---

리액트 18버전에서는 모든 업데이트가 어디에 포함되어 있는가와 관계없이 자동으로 batching 처리되도록 Automatic Batching(자동 배칭) 되는데 ReactDOM.render 메소드의 사용 방법이 달라져서 18버전에 맞게 적용을 해주어야한다. 만약 18버전의 render 방식으로 하지 않으면 17버전으로 동작하게 된다.

React18 Batching 적용하지 않기

개발을 하다보면 이전 상태에 의존성을 가진 상황을 구현해야 할 때가 있다. 이 경우에는 batching 프로세스가 동작하지 않도록 막아야 할 필요성이 있으며batching 프로세스를 막는 방법은 아래와 같이 flushSync 메소드를 사용해서 막을 수 있다.

// batching을 막고 싶을 때
import { flushSync } from 'react-dom';
// Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}