Для чего нужен React Suspense?

React Suspense — механизм декларативной обработки «ожидания»: пока поддерево не готово к показу (грузится код или данные), React показывает fallback.

Базовое использование

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Если кто-то внутри «приостановился» (suspended), React рендерит fallback, а когда всё готово — показывает контент целиком.

Сценарии применения

Ленивая загрузка кода — классика с React.lazy:

const ChartPage = React.lazy(() => import('./ChartPage'));

<Suspense fallback={<PageSkeleton />}>
  <ChartPage />
</Suspense>

Ожидание данных — фреймворки и библиотеки (Next.js App Router, TanStack Query с suspense-режимом, use() в React 19) позволяют компонентам приостанавливаться до готовности данных. Компонент пишется так, будто данные всегда есть, — состояния loading выносятся в границы Suspense.

Стриминг SSR (React 18) — сервер отдаёт HTML по частям: обёрнутые в Suspense медленные блоки приходят позже, не блокируя остальную страницу.

Плавные переходы — с useTransition/useDeferredValue уже показанный контент не заменяется fallback'ом при обновлении, пока готовится новый.

Зачем это нужно (идея)

Убрать ручную возню с if (isLoading) return <Spinner /> из каждого компонента: состояния ожидания описываются декларативно на уровне дерева, границы выбирают, какой кусок UI ждёт целиком, а какой — независимо.

Нюансы

• Suspense не ловит ошибки — для них Error Boundary (обычно их ставят парой).
• Границы стоит расставлять по смысловым блокам (страница / виджет), а не вокруг каждого компонента.

Коротко для собеседования

Suspense декларативно показывает fallback, пока поддерево не готово: ленивые компоненты (React.lazy), данные (React Query suspense, use() в React 19), стриминг SSR. Убирает ручные isLoading-проверки, а с transitions даёт плавные обновления без мигания. Ошибки не ловит — это задача Error Boundary.