В какой Hook подключается REST API

В какой Hook подключается REST API

useEffect — это основной Hook для подключения REST API в React-компонентах. Это хук для работы с побочными эффектами, и загрузка данных из внешних источников является классическим примером такого эффекта.

useEffect для загрузки данных

Когда компонент монтируется (загружается), нужно отправить запрос на сервер. Для этого используется useEffect с пустым массивом зависимостей:

import { useEffect, useState } from "react";

function UserProfile() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []); // Пустой массив = выполнится только один раз при монтировании

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error}</p>;
  return <div>{data.name}</div>;
}

Зависимости в useEffect

Массив зависимостей контролирует, когда хук выполняется:

• Пустой массив [] — выполнится только при монтировании
• С зависимостями [userId] — выполнится при изменении userId
• Без массива — выполнится после каждого рендера (редко используется)

function PostList({ userId }) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Запрос будет переотправляться каждый раз при изменении userId
    fetch(`/api/users/${userId}/posts`)
      .then(res => res.json())
      .then(setPosts);
  }, [userId]); // userId в зависимостях

  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Отмена запросов (AbortController)

Важно отменять запросы, чтобы избежать утечек памяти при размонтировании компонента:

useEffect(() => {
  const controller = new AbortController();

  fetch("/api/data", { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== "AbortError") {
        setError(err);
      }
    });

  // Cleanup функция отменяет запрос при размонтировании
  return () => controller.abort();
}, []);

Альтернативный подход: кастомный хук

Для переиспользуемой логики можно создать собственный хук:

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

  useEffect(() => {
    const controller = new AbortController();
    
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => !controller.signal.aborted && setError(err))
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// Использование
function App() {
  const { data, loading, error } = useFetch("/api/users");
  return loading ? <p>Загрузка...</p> : <div>{JSON.stringify(data)}</div>;
}

Новый подход: React Query или SWR

Для сложных сценариев используют библиотеки:

import useSWR from "swr";

function UserProfile({ userId }) {
  const { data, error, isLoading } = useSWR(`/api/users/${userId}`, fetch);
  
  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка загрузки</p>;
  return <div>{data.name}</div>;
}

Ключевые моменты

• useEffect — стандартный Hook для REST API
• Пустой массив зависимостей — запрос при монтировании
• AbortController — отмена запросов для избежания утечек
• Кастомные хуки — переиспользуемая логика
• React Query/SWR — для сложного управления состоянием данных