Fonksiyonel React bileşeninde, önce senkron olarak iki setState çağrısı, sonra asenkron bir fonksiyon ve ardından üç setState çağrısı var. React 18 ve React 17'de kaç kez yeniden render olacak? Batching nedir ve ne zaman ortaya çıktı?

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