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