Как реализовать асинхронные операции в React с помощью хуков
Python
Middle
Без компании
Как реализовать асинхронные операции в React с помощью хуков
Ответы
Для асинхронных операций в React с хуками используйте `useEffect` и `useState`. Основной подход:
```
import { useState, useEffect } from 'react';
function AsyncComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // Пустой массив зависимостей = выполнить один раз при монтировании
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{JSON.stringify(data)}</div>;
}
```
Ключевые моменты:
- Используйте `async/await` внутри `useEffect`
- Обрабатывайте все состояния (загрузка, данные, ошибка)
- Не забывайте очистку в `useEffect` для отмены запросов при размонтировании
- Для сложных сценариев рассмотрите библиотеки типа `react-query` или `swr`