Что такое batching в React и зачем он нужен

Что проверяют

Понимаете ли вы, что несколько изменений состояния дают одну перерисовку, и знаете ли, что с 18 версии это работает везде.

Как отвечать

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

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // одна перерисовка, а не две
}

Что изменилось в React 18: раньше пакетировались только обновления внутри обработчиков событий React. Изменения в setTimeout, в промисах и в нативных обработчиках выполнялись по отдельности, и каждый давал свою перерисовку. С 18 версии автоматическое пакетирование работает везде.

Зачем это нужно: меньше перерисовок, нет промежуточных несогласованных состояний на экране, лучше отклик.

Важное следствие, которое и проверяют: состояние обновляется не сразу. Сразу после setCount(count + 1) переменная count в том же обработчике всё ещё старая, потому что это значение из замыкания текущего рендера. Поэтому обновления, зависящие от предыдущего значения, пишут функцией: setCount(c => c + 1).

Если пакетирование мешает (редкий случай, обычно при работе с внешним DOM), его отключают точечно через flushSync, но это дорого и делает лишнюю перерисовку.

Где спотыкаются

Читают состояние сразу после setState и удивляются старому значению.

Пишут setCount(count + 1) дважды подряд и получают увеличение на единицу.

Не знают, что до 18 версии пакетирования вне обработчиков не было.

Пихают flushSync для «надёжности» и теряют весь выигрыш.