Как работает батчинг обновлений состояния в React 18?

Что такое батчинг обновлений состояния?

Батчинг (batching) — это механизм, при котором React группирует несколько вызовов setState (или useState) в одно обновление, вызывая только один повторный рендер компонента. Это критически важно для производительности, так как каждый рендер — это дорогостоящая операция, включающая пересчет виртуального DOM и синхронизацию с реальным DOM.

Как это работало раньше?

До React 18 батчинг применялся только внутри обработчиков событий React (например, onClick). Вне этих обработчиков — в промисах, setTimeout, нативных событиях — каждый вызов setState вызывал отдельный рендер. Это приводило к избыточным перерисовкам и снижению производительности.

Автоматический батчинг в React 18

Начиная с React 18, батчинг стал автоматическим и работает для всех обновлений состояния, независимо от контекста. Это означает, что даже если вы вызываете setState внутри setTimeout, fetch или Promise, React сгруппирует их в один рендер.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    // React 18: один рендер
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
  }

  function handleAsync() {
    setTimeout(() => {
      // React 18: один рендер (автоматический батчинг)
      setCount(c => c + 1);
      setCount(c => c + 1);
    }, 1000);
  }

  return <button onClick={handleClick}>{count}</button>;
}

Как отключить батчинг?

В редких случаях, когда нужно принудительно выполнить рендер после каждого обновления (например, для чтения DOM-свойств), можно использовать flushSync из react-dom:

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => setCount(c => c + 1));
  flushSync(() => setCount(c => c + 1));
  // Два отдельных рендера
}

Вывод

Автоматический батчинг в React 18 — это улучшение производительности, которое работает «из коробки» и не требует дополнительных настроек. Его стоит применять во всех проектах на React 18, так как он уменьшает количество рендеров и делает приложение более отзывчивым. Исключения — случаи, когда требуется синхронное чтение DOM после каждого обновления, но они встречаются редко.