Пакетная обработка изменений состояния в React (batching)

Определение

Пакетная обработка позволяет группировать все изменения состояний setState и вызывать для них только один рендер.

Логика пакетной обработки зависит от версии react:

17 версия

Асинхронный код await setTimeout меняет логику пакетной обработки — каждый вызов setState после асинхронного кода будет вызывать рендер.

18 версия

Вызов асинхронного кода не изменяет логику работы batching — все вызовы setState после асинхронного кода будут объединяться и вызывать только один рендер.

Поведение можно изменить с помощью flushSync

flushSync

Принимает аргументом функцию, которая содержит setState'ы для которых нужно будет вызвать отдельный рендер.

flashSync(
  () => {
    setState1()
    setState2()
  }
)

https://www.youtube.com/watch?v=lj0JjbVJPz0