Как объединить обновление состояния для нескольких setState?

Question

React группирует несколько вызовов setState, происходящих в одном синхронном событии, в одно обновление, чтобы избежать лишних перерендеров. Это поведение называется батчинг, и оно работает по умолчанию в обработчиках событий React, но в асинхронном коде раньше требовалось вручную вызывать flushSync или unstable_batchedUpdates.

YeaHub · Accepted Answer

В React, когда вызывается setState, компонент не обновляется мгновенно. Вместо этого React объединяет (batch) несколько обновлений, чтобы сделать один перерендер.Как это работает:Синхронные событияВ обработчиках событий React все вызовы setState будут объединены.Асинхронный кодДо React 18 в промисах, таймерах или нативных событиях батчинг не работал, приходилось использовать unstable_batchedUpdates.React 18Бatching теперь включен по умолчанию и для асинхронного кода.Пример:function Example() { const [count, setCount] = React.useState(0); const [value, setValue] = React.useState(''); function handleClick() { setCount(c => c + 1); setValue('Updated'); // Произойдет один рендер, а не два } return ; }Вывод: Батчинг помогает повысить производительность, объединяя обновления и сокращая количество лишних перерендеров.