Хуки в React — они синхронные или асинхронные?

Синхронная природа хуков

Хуки в React, такие как useState, useEffect, useContext и другие, выполняются синхронно во время рендеринга компонента. Это означает, что когда вы вызываете хук, его логика обрабатывается немедленно в том же потоке выполнения, что и функция компонента. React гарантирует, что порядок вызовов хуков сохраняется между рендерами, что позволяет правильно связывать состояние и эффекты.

Пример синхронного выполнения

function Counter() {
  const [count, setCount] = useState(0); // синхронно
  console.log('Render:', count); // выполняется сразу
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

В этом примере useState вызывается синхронно, и значение count доступно сразу после вызова. Однако setCount, который обновляет состояние, работает асинхронно: React планирует новый рендер, но не выполняет его мгновенно.

Асинхронные аспекты

Хотя сами хуки синхронны, некоторые их эффекты могут быть асинхронными. Например, useEffect может содержать асинхронные операции, такие как запросы к API. Но сам хук useEffect вызывается синхронно после рендеринга, а его callback выполняется позже.

useEffect(() => {
  fetch('/data').then(response => response.json()); // асинхронно
}, []);

Здесь useEffect синхронно регистрирует эффект, но fetch выполняется асинхронно.

Вывод

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