Функция изменения значения в React является синхронной или асинхронной

Синхронность vs асинхронность в React: глубокий разбор

Функция изменения состояния в React (например, setState в классовых компонентах или сеттер от useState в функциональных) является синхронной по своей природе исполнения, но с асинхронным поведением в контексте обновлений компонентов.

Техническая реализация и поведение

// Пример с функциональным компонентом
const [count, setCount] = useState(0);

const handleClick = () => {
  console.log('До:', count); // 0
  
  setCount(1); // Синхронный вызов, но React может отложить обновление
  
  console.log('После:', count); // Все еще 0, а не 1!
};

Ключевой момент: вызов setCount происходит синхронно (функция выполняется немедленно), но само обновление значения count и повторный рендер компонента могут быть отложены или батчингованы (объединены) React для оптимизации производительности.

Механизм батчинга (объединения обновлений)

React группирует несколько обновлений состояния в один цикл рендеринга для минимизации лишних перерисовок:

const handleMultipleUpdates = () => {
  // Все три обновления будут объединены в одно
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); 
  setCount(prev => prev + 1);
  // В итоге count увеличится на 3, но будет только один ререндер
};

Сценарии, когда обновления становятся синхронными

В определенных случаях React выполняет обновления состояния синхронно:

// 1. События, не обернутые в React (нативные DOM события)
document.getElementById('myButton').addEventListener('click', () => {
  setCount(count + 1); // Синхронное обновление!
  console.log(count); // Уже обновленное значение
});

// 2. setTimeout, setInterval, Promise.then и другие асинхронные операции
setTimeout(() => {
  setCount(count + 1); // Синхронное обновление!
  console.log(count); // Уже обновленное значение
}, 1000);

Практические рекомендации и паттерны

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

// ❌ Проблемный подход (может работать некорректно при батчинге)
const increment = () => {
  setCount(count + 1);
  setCount(count + 1); // Использует старое значение count
};

// ✅ Корректный подход с функциональным обновлением
const incrementCorrectly = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1); // Использует актуальное значение
};

Как отслеживать актуальное состояние

Для выполнения кода после обновления состояния используйте хук useEffect:

useEffect(() => {
  console.log('Count обновлен:', count);
  // Этот код выполнится после того, как компонент перерендерится
}, [count]); // Зависимость от count

const handleClick = () => {
  setCount(42);
  // Здесь count еще не обновлен
  // Но эффект сработает после обновления
};

Эволюция поведения в разных версиях React

• React 16 и 17: Батчинг работал только для обновлений, инициированных React-событиями (onClick, onChange и т.д.)
• React 18 с Concurrent Features: Батчинг работает по умолчанию для всех обновлений, включая таймауты, промисы и нативные события

// В React 18 с createRoot все обновления внутри таймаутов тоже батчатся
setTimeout(() => {
  setCount(1);
  setFlag(true);
  // Один ререндер вместо двух
}, 100);

Выводы и практические следствия

1. Не полагайтесь на немедленное обновление значения состояния после вызова сеттера
2. Используйте функциональные обновления, когда новое значение зависит от предыдущего
3. Для пост-обработки используйте useEffect с соответствующими зависимостями
4. Помните о различиях поведения в синхронных и асинхронных контекстах
5. В React 18 поведение стало более последовательным благодаря автоматическому батчингу

Понимание этого аспекта React критически важно для написания корректных, производительных и предсказуемых приложений, особенно при работе со сложной state-логикой и оптимизацией ререндеров.