Как правильно использовать async/await внутри useEffect?

Проблема с async/await в useEffect

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

Правильный подход

Создайте асинхронную функцию внутри колбэка useEffect и сразу вызовите её. Это позволяет использовать await и обрабатывать ошибки.

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('Ошибка загрузки:', error);
    }
  };
  fetchData();
}, []);

Обработка отмены запросов

Для предотвращения утечек памяти при размонтировании компонента используйте флаг или AbortController.

useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    try {
      const response = await fetch('/api/data', { signal: controller.signal });
      const data = await response.json();
      setData(data);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error(error);
      }
    }
  };
  fetchData();
  return () => controller.abort();
}, []);

Вывод

Используйте внутреннюю асинхронную функцию с try/catch и функцией очистки для безопасной работы с асинхронными операциями в useEffect. Это предотвращает утечки памяти и корректно обрабатывает ошибки.