Реализуй кастомный хук useFetch для получения данных по URL с обработкой состояний загрузки и ошибки.

Что такое useFetch и зачем он нужен?

Кастомный хук useFetch — это функция, которая оборачивает логику выполнения HTTP-запроса и управления его состояниями (загрузка, успех, ошибка). Вместо того чтобы дублировать код с fetch, useState и useEffect в каждом компоненте, вы создаёте один переиспользуемый хук. Это улучшает читаемость, тестируемость и поддерживаемость кода.

Как реализовать useFetch?

Хук принимает URL и опциональные параметры запроса. Внутри он использует useState для хранения данных, состояния загрузки и ошибки, а useEffect для выполнения запроса при изменении URL. Важно обрабатывать отмену запроса (cleanup), чтобы избежать утечек памяти и обновления состояния после размонтирования компонента.

import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);

    fetch(url, options)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
        return res.json();
      })
      .then(json => {
        if (!cancelled) {
          setData(json);
          setLoading(false);
        }
      })
      .catch(err => {
        if (!cancelled) {
          setError(err.message);
          setLoading(false);
        }
      });

    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

Как использовать хук в компоненте?

Просто вызовите useFetch с нужным URL и деструктурируйте возвращаемые значения. В зависимости от состояний вы можете показывать спиннер, сообщение об ошибке или отображать данные.

function UserList() {
  const { data, loading, error } = useFetch('https://api.example.com/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>
  );
}

Вывод

Кастомный хук useFetch — это мощный паттерн для централизации логики HTTP-запросов в React-приложениях. Он уменьшает дублирование кода, улучшает читаемость и упрощает тестирование. Используйте его везде, где требуется получение данных из API, особенно в крупных проектах с множеством запросов.