Самописный хук useFetch

Условие

Реализуйте пользовательский хук useFetch, который принимает в качестве параметра адрес ресурса.

function useFetch(endpoint) {}

Ответ

Хук должен возвращать данные, загрузку и ошибку, перезапуская запрос при смене endpoint. Cleanup отменяет предыдущую загрузку и предотвращает устаревшее обновление.

function useFetch(endpoint) {
  const [state, setState] = React.useState({ endpoint: null, data: null, error: null, loading: false });
  React.useEffect(() => {
    const controller = new AbortController();
    setState({ endpoint, data: null, error: null, loading: true });
    (async () => {
      try {
        const response = await fetch(endpoint, { signal: controller.signal });
        if (!response.ok) throw new Error('HTTP ' + response.status);
        const data = await response.json();
        if (!controller.signal.aborted) setState({ endpoint, data, error: null, loading: false });
      } catch (error) {
        if (!controller.signal.aborted) setState({ endpoint, data: null, error, loading: false });
      }
    })();
    return () => controller.abort();
  }, [endpoint]);
  if (state.endpoint !== endpoint) return { data: null, error: null, loading: true };
  return { data: state.data, error: state.error, loading: state.loading };
}

Пример рассчитан на JSON GET и непустой строковый URL. Кеш, retry, авторизация и runtime-проверка DTO — отдельные расширения; сетевые ошибки нельзя трактовать как пустой успешный результат.