В каких компаниях работал

Зачем React ожидает выполнения всех действий пользователя для рендера

Это важный вопрос о батчировании (batching) событий в React. React группирует обновления состояния для оптимизации производительности.

Проблема без батчирования

// БЕЗ батчирования (старый подход)
function handleClick() {
  setCount(count + 1);     // Рендер 1
  setName('John');          // Рендер 2
  setEmail('john@example'); // Рендер 3
}
// 3 рендера для одного клика!

Решение: батчирование

// С батчированием (React 18+)
function handleClick() {
  setCount(count + 1);      // Очередь обновлений
  setName('John');          // Очередь обновлений
  setEmail('john@example'); // Очередь обновлений
  // 1 рендер для всех обновлений!
}

Как это работает

// React группирует обновления

1. Пользователь кликает на кнопку
2. handleClick() вызывается
3. React СОБИРАЕТ все setState вызовы
4. Когда функция завершится, React ОДИН РАЗ пересчитывает компонент
5. Один рендер вместо нескольких

Пример эффекта

function Counter() {
  const [count, setCount] = useState(0);
  const [doubled, setDoubled] = useState(0);
  
  const handleClick = () => {
    console.log('Начало');
    setCount(c => c + 1);
    setDoubled(d => d + 2);
    console.log('Конец функции');
    // Рендер произойдёт ПОСЛЕ завершения функции
  };
  
  console.log('Рендер:', count, doubled);
  
  return <button onClick={handleClick}>Click</button>;
}

// Вывод:
// "Начало"
// "Конец функции"
// "Рендер: 1 2" (один рендер после функции)

Асинхронные операции

Батчирование НЕ работает для асинхронного кода

function handleClick() {
  fetch('/api/data').then(data => {
    setCount(data.count);  // Рендер 1
    setName(data.name);    // Рендер 2
    // В старом React это 2 отдельных рендера!
  });
}

// В React 18+ это тоже батчируется (автоматически)

React 18 улучшения

React 18 вводит автоматическое батчирование везде:

// Теперь батчируется даже в асинхронном коде
function handleClick() {
  setCount(c => c + 1);
  
  setTimeout(() => {
    setName('John');      // Батчируется (React 18+)
    setEmail('john@ex');  // Батчируется (React 18+)
  }, 0);
}

Отключение батчирования

Если нужно немедленно обновить (редко):

import { flushSync } from 'react-dom';

function handleClick() {
  setCount(c => c + 1);     // Батчируется
  
  flushSync(() => {
    setName('John');        // Немедленно рендерится
  });
  
  setEmail('john@ex');      // Батчируется со следующим
}

Преимущества батчирования

✓ Меньше рендеров = лучше производительность
✓ Меньше DOM обновлений
✓ Более плавный UI
✓ Меньше использование CPU
✓ Быстрее приложение в целом

Когда это важно

// Много обновлений состояния
function handleComplexAction() {
  setUser(newUser);        // 5 обновлений
  setProfile(newProfile);  // батчируются
  setSettings(newSettings);
  setPreferences(newPref);
  setNotifications(newNote);
  // Один рендер вместо 5!
}

Заключение

React ожидает завершения всех действий пользователя (в одной функции) и только потом рендерит все обновления вместе. Это называется батчированием и является критической оптимизацией производительности в React.