Работа с API и состоянием: лучшие практики

Коротко. Любой запрос к API — это три состояния: загрузка, успех, ошибка. Джуну важно всегда обрабатывать все три, а не только «успех». Для простого проекта хватает fetch + useState/useEffect; когда запросов много, помогает библиотека вроде React Query с кэшированием.

Запрос к API

Базовый fetch с обработкой ошибки:

async function getUsers() {
  const res = await fetch("/api/users");
  if (!res.ok) throw new Error("Ошибка " + res.status);
  return res.json();
}

Проверка res.ok обязательна: fetch не бросает исключение на статус 404 или 500 сам по себе.

Три состояния запроса

Типовой паттерн на хуках:

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

  useEffect(() => {
    getUsers()
      .then(setData)
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

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

Пользователь всегда должен понимать, что происходит: спиннер при загрузке, внятное сообщение при ошибке.

Когда нужен React Query

Когда запросов много, ручной useState/useEffect превращается в кашу. Библиотеки (React Query / TanStack Query) дают из коробки:

• кэширование и дедупликацию запросов;
• автоматические повторы и обновление данных;
• состояния loading/error без ручного кода.

Частые ошибки

• ❌ Не обрабатывать ошибку и загрузку — «белый экран» у пользователя.
• ❌ Забыть массив зависимостей в useEffect — бесконечные запросы.
• ❌ Не проверять res.ok — ошибки сервера проходят как «успех».
• ❌ Хранить в состоянии то, что можно вычислить из имеющихся данных.

Частые вопросы

fetch или axios?
Для старта хватает встроенного fetch. axios удобнее для сложных случаев, но это не обязательный навык джуна.

Нужен ли Redux джуну?
Часто нет. Начните со встроенного состояния React; глобальный стейт-менеджер добавляйте, когда реально понадобится.

Что показывать при загрузке?
Спиннер или скелетон. Главное — не пустой экран без обратной связи.