Loading и Error состояния
Тема дорожной карты · React
Состояния загрузки и ошибок — это паттерны обратной связи в UI, которые React-приложения используют для информирования пользователей о ходе асинхронных операций и возникших сбоях. В типичном сценарии загрузки данных React-компонент отслеживает три различных состояния — loading, data и error — через useState или библиотеку управления состоянием, и условно рендерит спиннер, загруженный контент или сообщение об ошибке в зависимости от активного состояния. Правильная обработка состояний загрузки и ошибок предотвращает пустые экраны, сбивающие с толку мигания UI и беззвучные сбои, ухудшающие пользовательский опыт в React-приложениях. Библиотеки @tanstack/react-query и SWR напрямую предоставляют флаги isLoading, isError и data из своих хуков, стандартизируя управление состояниями загрузки и ошибок по всему приложению. Совместное использование состояний загрузки и ошибок с границами Suspense и компонентами Error Boundary обеспечивает устойчивые React-интерфейсы, готовые к производству, — они корректно обрабатывают сбои сети и медленные соединения.
Как это работает
Loading и Error состояния давно ушло от сырого fetch в useEffect. Современные приложения используют TanStack Query (бывший React Query) или SWR — обе управляют кешем, дедупом, фоновым refetch, оптимистичными обновлениями, loading/error состояниями. Паттерн: const {data, isLoading, error} = useQuery({queryKey, queryFn}). Библиотека сама следит за staleness, инвалидацией и пагинацией. Мутации — через useMutation, на успехе инвалидируют нужные queryKeys.
Когда применять
TanStack Query или SWR — для любых нетривиальных async-данных; они экономят недели на кеше и state-водопроводе. Сырой fetch+useEffect — только для простейших one-page демо. Для SSR-приложений (Next.js App Router) предпочитайте server components + server-side fetch; TanStack Query подключайте только для client-side кеша интерактивных view. Всегда рендерите isLoading и error явно — никогда не верьте только happy path.
Типичные ошибки
Ловушки Loading и Error состояния: fetch внутри useEffect без cleanup (race: поздний ответ старого запроса перезаписывает свежие данные); дубликаты queryKey в разных компонентах (коллизии кеша); нет инвалидации кеша после мутации (stale-данные на экране); игнор error-границы (брошенная fetch-ошибка в effect не обрабатывается — оберните в try/catch или используйте error handling библиотеки).