Что произойдёт, если одна из асинхронных операций в useEffect вернёт ошибку?

Что происходит при ошибке в асинхронном useEffect?

Когда вы выполняете асинхронную операцию внутри useEffect, например, fetch запрос, и она завершается ошибкой, React не перехватывает эту ошибку автоматически. Это может привести к необработанному отклонению промиса (unhandled promise rejection), которое в строгих окружениях (например, в Node.js) может завершить процесс, а в браузере — просто вывести предупреждение в консоль. Компонент при этом не узнает об ошибке, и пользователь не увидит никакого уведомления.

Как правильно обрабатывать ошибки?

Для корректной обработки используйте конструкцию try/catch внутри асинхронной функции, объявленной в useEffect. Обновляйте состояние компонента, чтобы отобразить ошибку пользователю. Также важно отменять запросы при размонтировании компонента, чтобы избежать обновления состояния после размонтирования (это вызывает предупреждение React).

useEffect(() => {
  let cancelled = false;
  async function fetchData() {
    try {
      const response = await fetch('/api/data');
      if (!cancelled) {
        setData(await response.json());
      }
    } catch (error) {
      if (!cancelled) {
        setError(error.message);
      }
    }
  }
  fetchData();
  return () => { cancelled = true; };
}, []);

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

• Всегда оборачивайте асинхронный код в try/catch внутри useEffect.
• Используйте флаг или AbortController для отмены запросов при размонтировании.
• Не делайте сам useEffect асинхронным — React ожидает, что эффект вернет cleanup-функцию или undefined.

Вывод: обработка ошибок в асинхронных операциях useEffect — обязательная практика для стабильных React-приложений. Она предотвращает необработанные промисы и позволяет корректно уведомлять пользователя о проблемах.