Встречается на собеседованиях • сегодня

Компоновались ли в один рендеринг несколько states вызванных подряд в React

React 18+ группирует несколько синхронных вызовов setState в один рендеринг (batching) для оптимизации. Это работает как в обработчиках событий, так и в useEffect. Однако асинхронные операции (например, внутри setTimeout) не батчатся автоматически.

jsx
function Example() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    setCount(c => c + 1); // не вызывает ререндер
    setFlag(f => !f);     // не вызывает ререндер
    // React выполнит один ререндер после выхода из функции
  };

  // В асинхронном коде батчинг не работает:
  const asyncClick = () => {
    setTimeout(() => {
      setCount(c => c + 1); // ререндер
      setFlag(f => !f);     // ещё один ререндер
    }, 0);
  };
}

Для принудительного батчинга в асинхронном коде можно использовать ReactDOM.flushSync() (редкий кейс).

Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы