Как обработать ответ API в React

Что проверяют

Умеете ли вы довести запрос до экрана без типичных дыр: гонок, забытых ошибок, мигающего интерфейса. Код с useEffect и тремя useState пишут все, поэтому следом спрашивают, что будет при быстрой смене параметров и почему в проекте лучше взять библиотеку.

Как отвечать

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

• проверка статуса: fetch не бросает исключение на 404 и 500, только на сетевой сбой. Нужно проверить response.ok и выбросить ошибку самому. axios, наоборот, по умолчанию отклоняет промис на любой ответ вне диапазона 2xx;
• разбор и валидация: response.json() падает на пустом теле или HTML-странице ошибки. Форму данных стоит проверять схемой (zod, valibot) на границе, а не надеяться на типы TypeScript, которые в рантайме ничего не гарантируют;
• отмена и гонки: в useEffect создайте AbortController и вызовите abort() в функции очистки. Иначе ответ на старый запрос может прийти позже нового и перезаписать данные. К тому же в StrictMode эффект при разработке запускается дважды;
• пустое состояние: пустой массив это не ошибка, для него нужен отдельный текст.

Для реального проекта назовите TanStack Query, SWR или RTK Query: они берут на себя кэш, дедупликацию одинаковых запросов, повторы, фоновое обновление и отмену. В React 19 появилась функция use(), которая читает промис вместе с Suspense, а ошибки ловит Error Boundary. Промис при этом создают вне рендера или кэшируют, иначе запрос будет стартовать заново на каждом рендере. В Next.js App Router данные часто грузят прямо в серверном компоненте.

Где спотыкаются

Пишут useEffect(async () => {...}). Эффект обязан вернуть функцию очистки или ничего, а async-функция возвращает промис. Асинхронную функцию объявляют внутри эффекта и сразу вызывают.

Забывают, что ошибка HTTP в fetch не попадает в catch. Интерфейс получает объект ошибки от сервера и пытается сделать по нему map.

Держат флаги loading, error и data независимо и получают невозможные сочетания вроде загрузки с ошибкой одновременно. Надёжнее одно поле статуса или готовая библиотека.