Что такое React Suspense и для чего он используется?react-53

React Suspense — это механизм для управления асинхронными операциями и отложенным рендерингом в React-приложениях. Он позволяет компонентам "ждать" чего-либо перед рендером, показывая запасное содержимое (fallback).

Основные сценарии использования

  1. Ленивая загрузка компонентов (Lazy Loading)
  2. Загрузка данных (Data Fetching)
  3. Ожидание ресурсов (Изображений, скриптов)

Базовый синтаксис

import { Suspense } from 'react';

<Suspense fallback={<Loader />}>
  <AsyncComponent />
</Suspense>

1. Ленивая загрузка компонентов

Самый распространенный случай использования:

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Как это работает:

  • Компонент загружается только когда он нужен
  • Пока компонент грузится, показывается fallback
  • После загрузки компонент кешируется

2. Загрузка данных

Современный подход с React 18:

import { Suspense } from 'react';
import { fetchData } from './data';

const resource = fetchData(); // Возвращает промис

function DataComponent() {
  const data = resource.read(); // "Подвешивает" компонент если данные не готовы
  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<h1>Загружаем данные...</h1>}>
      <DataComponent />
    </Suspense>
  );
}

3. Группировка асинхронных операций

Можно оборачивать несколько асинхронных компонентов:

<Suspense fallback={<Spinner />}>
  <ProfileHeader />
  <ProfileDetails />
  <ProfileTimeline />
</Suspense>

Расширенные возможности

Каскадные Suspense

<Suspense fallback={<BigSpinner />}>
  <ProfilePage>
    <Suspense fallback={<ProfileHeaderSkeleton />}>
      <ProfileHeader />
    </Suspense>
    <Suspense fallback={<ProfileDetailsSkeleton />}>
      <ProfileDetails />
    </Suspense>
  </ProfilePage>
</Suspense>

Использование с Error Boundary

<ErrorBoundary>
  <Suspense fallback={<Loader />}>
    <AsyncContent />
  </Suspense>
</ErrorBoundary>

Ограничения Suspense

  1. Не заменяет обработку ошибок — нужно использовать с Error Boundary
  2. Не работает с серверным рендерингом в текущей реализации
  3. Требует интеграции с библиотекой для загрузки данных (React Query, Relay, SWR)

Под капотом

Suspense использует механизм "подвешивания" (suspending):

  1. Когда компонент "подвешивается", React ищет ближайший Suspense выше в дереве
  2. Показывает fallback до разрешения промиса
  3. После выполнения промиса повторно рендерит поддерево

Резюмируем

React Suspense — это мощный инструмент для управления асинхронными операциями в React. Он особенно полезен для:

  • Ленивой загрузки кода
  • Загрузки данных с индикацией состояния
  • Создания плавного UX при работе с асинхронными ресурсами

Используйте Suspense везде, где нужно показать промежуточное состояние во время ожидания ресурсов, сочетая его с Error Boundary для обработки ошибок.

Вопросы

Собеседования