Функционалдуу React компонентиде эки синхрондуу setState чакырыгы бар, андан кийин асинхрондуу функция, андан кийин дагы үч setState чакырык. React 18 жана React 17де канча рендер болот? Бэтчинг деген эмне жана ал качан пайда болду?

В 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, что значительно улучшило производительность при работе с асинхронным кодом.