В функциональном React-компоненте есть два вызова setState синхронно, затем асинхронная функция, затем ещё три вызова setState. Сколько рендеров произойдёт в React 18 и в React 17? Что такое batching и когда он появился?

В React 17 и более ранних версиях batching (пакетная обработка обновлений состояния) происходила только внутри обработчиков событий React. Это значит, что несколько вызовов setState внутри одного обработчика объединялись в один рендер.

Если в функциональном компоненте есть два вызова setState подряд, затем асинхронная функция, затем ещё три вызова setState, то:

• В React 17:

  • Первые два вызова setState в одном синхронном блоке будут объединены в один рендер.
  • Асинхронная функция (например, setTimeout или промис) прервёт batching, поэтому следующие три вызова setState будут обработаны отдельно, каждый может вызвать отдельный рендер, если они не объединены вручную.
  • Итого: минимум 4 рендера (1 после первых двух вызовов, и до 3 после каждого из трёх вызовов после асинхронного кода).

• В React 18:

  • Появился расширенный автоматический batching, который объединяет все вызовы setState, включая асинхронные (например, внутри промисов, таймаутов и т.п.).
  • Все 5 вызовов setState (2 до асинхронной функции и 3 после) будут объединены в один рендер.
  • Итого: 1 рендер.

Что такое batching? Batching — это механизм объединения нескольких обновлений состояния в один рендер, чтобы повысить производительность и избежать лишних перерисовок.

Когда появился расширенный batching? Расширенный автоматический batching появился в React 18, что значительно улучшило производительность при работе с асинхронным кодом.