Σε ένα λειτουργικό συστατικό React, υπάρχουν δύο κλήσεις setState συγχρονικά, στη συνέχεια μια ασύγχρονη λειτουργία, και μετά άλλες τρεις κλήσεις setState. Πόσα render θα συμβούν στο 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, что значительно улучшило производительность при работе с асинхронным кодом.