useFetch — хук загрузки данных

Задача

Написать кастомный хук useFetch(url), который возвращает { data, loading, error }. При смене url или размонтировании предыдущий запрос должен отменяться, чтобы не было гонок и обновления state после размонтирования.

Пример

function UserCard({ userId }) {
    const { data, loading, error } = useFetch(`/api/users/${userId}`);
 
    if (loading) return <p>Loading…</p>;
    if (error) return <p>Error: {error.message}</p>;
    return <p>{data.name}</p>;
}

Решение

Оптимальное решение

function useFetch(url) {
    const [state, setState] = useState({
        data: null,
        loading: true,
        error: null,
    });
 
    useEffect(() => {
        const controller = new AbortController();
 
        setState({ data: null, loading: true, error: null });
 
        fetch(url, { signal: controller.signal })
            .then((r) => {
                if (!r.ok) throw new Error(`HTTP ${r.status}`);
                return r.json();
            })
            .then((data) => {
                setState({ data, loading: false, error: null });
            })
            .catch((error) => {
                // отменённый запрос — не ошибка, просто выходим
                if (error.name === 'AbortError') return;
                setState({ data: null, loading: false, error });
            });
 
        // отменяем запрос при смене url / размонтировании
        return () => controller.abort();
    }, [url]);
 
    return state;
}

Почему так

• Всё состояние в одном объекте — обновляется атомарно, нет рассинхрона loading/data.
• AbortController отменяет незавершённый fetch в cleanup: при быстрой смене url устаревший ответ не перезапишет актуальный (защита от race condition).
• AbortError в catch игнорируется — это ожидаемая отмена, а не сбой.
• Зависимость [url] перезапускает эффект при смене адреса.

См. также

• fix-useeffect-deps
• use-previous