Вопрос проверяет понимание паттернов управления асинхронным состоянием в React, включая обработку состояний загрузки, ошибки и успешного получения данных.
При работе с асинхронными запросами в React часто требуется управлять тремя состояниями: загрузка (loading), ошибка (error) и успешные данные (data). Инкапсуляция этой логики в кастомный хук позволяет переиспользовать её в разных компонентах, делая код чище и поддерживаемее.
Создадим хук useFetch, который принимает URL и возвращает объект с состояниями:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
if (!response.ok) throw new Error('Network error');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}Компонент просто вызывает хук и отображает соответствующее состояние:
function UserList() {
const { data, loading, error } = useFetch('/api/users');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}Инкапсуляция состояний загрузки в кастомный хук упрощает управление асинхронными данными, улучшает читаемость и переиспользование кода. Этот подход рекомендуется применять в любом React-приложении, где есть запросы к API.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюУровень
Рейтинг:
4
Сложность:
4
Навыки
JavaScript
React
Ключевые слова
Подпишись на React Developer в телеграм
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию