Batching Update

여러 상태 업데이트를 하나의 리렌더링으로 묶어 처리하는 React의 성능 최적화 기법입니다.

상태가 변경될 때마다 컴포넌트는 리렌더링되는데, 여러 상태 업데이트가 연달아 발생할 경우 각각 렌더링이 일어난다면 비효율적입니다.
이를 방지하기 위해 React는 여러 상태 변경을 하나로 묶어(batch) 한 번만 렌더링되도록 처리합니다.

✅ 동작 방식

🔸 React 18 이전

React는 자체적으로 관리하는 영역(예: 이벤트 핸들러, 생명주기 메서드) 안에서만 배칭을 적용했습니다.

jsx
복사편집
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f); // 한 번의 렌더링 (배칭 적용)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f); // 각각 따로 렌더링 (배칭 적용 안됨)
}, 1000);

setTimeout, Promise 등 비동기 콜백 내부에서는 배칭이 적용되지 않아 각각 렌더링이 발생했습니다.

---

🔸 React 18 이후

React 18부터는 자동 배칭(auto-batching) 이 도입되어, React 외부 환경에서도 상태 업데이트가 자동으로 배칭됩니다.

적용되는 예시:

• setTimeout, setInterval 내부
• Promise 내부
• 네이티브 이벤트 핸들러
• 기타 비동기 컨텍스트

// React 18 이후
fetch("/api").then(() => {
  setCount(c => c + 1);
  setText("Updated");
  // 한 번만 리렌더링(자동 배칭)
});

✅ React 18 이후에는 개발자가 별도로 배칭을 고려하지 않아도, 더 많은 상황에서 성능 최적화가 자동으로 적용됩니다.