Есть React-компонент, в котором по клику на кнопку дважды вызывается setState с инвертированием булевого значения. Будет ли он работать корректно? Что такое batching в React?

Если в React-компоненте по клику на кнопку дважды вызвать setState с инвертированием булевого значения, то результат может быть неожиданным, если использовать форму setState с объектом напрямую. Это связано с тем, что React может батчить (batching) несколько вызовов setState в один, и при этом состояние не обновляется сразу, а обновляется асинхронно.

Например, если у вас есть состояние const [flag, setFlag] = useState(true), и вы вызываете:

setFlag(!flag);
setFlag(!flag);

то оба вызова используют одно и то же значение flag, например true, и оба установят false, в итоге состояние не изменится дважды, а только один раз.

Чтобы корректно инвертировать состояние несколько раз подряд, нужно использовать функциональную форму setState, которая принимает предыдущий стейт:

setFlag(prev => !prev);
setFlag(prev => !prev);

В этом случае первый вызов инвертирует true в false, второй — false обратно в true.

Batching в React — это механизм, при котором несколько вызовов setState, сделанные в одном событии или в одном цикле обновления, объединяются в один вызов обновления компонента. Это повышает производительность, так как не происходит лишних перерисовок. В React 18 batching стал работать не только внутри обработчиков событий, но и в асинхронных колбэках.

Таким образом, при использовании нескольких вызовов setState подряд важно использовать функциональный вариант обновления состояния, чтобы избежать ошибок из-за батчинга.