Реализуй универсальный React-хук useFetch для GET-запросов. Продумай удобный API хука, возвращаемые data/loading/error, обработку HTTP-ошибок и повторное получение данных при изменении URL.

Хук может принимать URL, возвращать data/loading/error и отменять либо игнорировать предыдущую операцию при изменении адреса.

Ниже контракт для JSON GET: URL — строка либо null для отключения запроса; кэширование и ручной refetch не включены.

function useFetch(url) {
  const [state, setState] = useState({ url: null, data: null, loading: false, error: null });
  useEffect(() => {
    if (!url) {
      setState({ url, data: null, loading: false, error: null });
      return;
    }
    let active = true;
    const controller = new AbortController();
    setState({ url, data: null, loading: true, error: null });
    async function load() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();
        if (active) setState({ url, data, loading: false, error: null });
      } catch (error) {
        if (active) setState({ url, data: null, loading: false, error });
      }
    }
    void load();
    return () => { active = false; controller.abort(); };
  }, [url]);
  if (state.url !== url) return { data: null, loading: Boolean(url), error: null };
  return { data: state.data, loading: state.loading, error: state.error };
}

useState/useEffect импортируют из React. Проверка URL скрывает старые данные ещё до нового эффекта. Структуру JSON дополнительно валидируют под конкретный API; пустой 204-ответ требует отдельного контракта.