Этот вопрос проверяет знание механизма батчинга (batching) в React и оптимизации обновлений состояния.
React группирует несколько вызовов setState, происходящих в одном синхронном событии, в одно обновление, чтобы избежать лишних перерендеров. Это поведение называется батчинг, и оно работает по умолчанию в обработчиках событий React, но в асинхронном коде раньше требовалось вручную вызывать flushSync или unstable_batchedUpdates.
В 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 <button onClick={handleClick}>Click</button>;
}Вывод:
Батчинг помогает повысить производительность, объединяя обновления и сокращая количество лишних перерендеров.