Встречается на собеседованиях • сегодня

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

В React нельзя напрямую использовать async/await внутри useEffect, потому что useEffect ожидает либо функцию очистки, либо undefined, а async функция всегда возвращает промис.

Решение:
Создайте асинхронную функцию внутри useEffect и вызовите её:

javascript
useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  };

fetchData();
}, []);

text

**Очистка (если нужно):**  
Если запрос может быть отменён, используйте `AbortController`:  

```javascript
useEffect(() => {
  const controller = new AbortController();
  
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data', {
        signal: controller.signal,
      });
      const data = await response.json();
      console.log(data);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error(error);
      }
    }
  };

  fetchData();

  return () => controller.abort();
}, []);
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы