Работа с 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 сам по себе. Что вообще значат статусы и методы — в статье REST API от А до Я.

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

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

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 без ручного кода.

Для портфолио джуна знать React Query необязательно, но упомянуть, что понимаете, зачем он нужен, — плюс на собеседовании.

Гонки запросов и отмена

Частая скрытая ошибка: пользователь быстро меняет запрос, приходит несколько ответов, и на экран попадает устаревший. Решается отменой предыдущего запроса через AbortController:

useEffect(() => {
  const ac = new AbortController();
  fetch("/api/search?q=" + q, { signal: ac.signal })
    .then((r) => r.json())
    .then(setData)
    .catch((e) => { if (e.name !== "AbortError") setError(e.message); });
  return () => ac.abort(); // отменяем при новом запросе
}, [q]);

Этот паттерн отличает вдумчивого джуна от того, кто «просто дёргает fetch».

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

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

Состояния UI, которые забывают новички

loading / success / empty / error — четыре обязательных. Плюс retry, отмена запроса при размонтировании, не гонять N одинаковых fetch. Глобальный store не нужен, пока props/context хватает. Серверный кэш (React Query и аналоги) часто проще самописного Redux «на всё».

Следующий шаг во фронтенде

Примените идеи из «Работа с API и состоянием: лучшие практики» к своему учебному проекту или к одной вакансии на этой неделе. Сделайте маленький артефакт в git: компонент/страница с адаптивном, один fetch к API, обработка loading/error. Карта обучения: карта фронтенда, полный план — старт 2026, проекты — React для портфолио. Обзор роли — frontend starter.

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

Пройдите материал не как статью, а как задание. Выпишите 3 тезиса из разделов (Запрос к API; Три состояния запроса; Когда нужен React Query) и напротив каждого — действие на 30–90 минут: что сделаете руками, какой файл/репозиторий появится, как поймёте что готово. Без этого колонки «изучил» в голове не конвертируются в оффер.

Связка с соседними материалами: REST API от А до Я, карта фронтенда, старт 2026, React для портфолио, frontend starter. Не читайте всё подряд — возьмите один следующий URL и закройте его артефактом в git до конца недели. Если роль ещё не выбрана, сначала профессии и 5 вакансий-ориентиров, потом возвращайтесь к этой теме.

На собеседовании по теме «Работа с API и состоянием: лучшие практики» вас почти всегда просят пример из практики. Подготовьте 60–90 секунд: задача → что сделали → результат/ограничение. Даже учебный пример звучит сильнее пересказа теории.

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

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

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

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

Где хранить токен авторизации?
Тема отдельного разбора — см. авторизация и сессии. Если коротко: не в коде и осторожно с localStorage.

Материал «Работа с API и состоянием: лучшие практики» имеет смысл только вместе с практикой: один артефакт в git на этой неделе важнее десяти вкладок с теорией. Если застряли на выборе роли — начните с профессий и одной вакансии-ориентира.