🌍 Привет мир! 👋🏻

🌍 Привет мир! 👋🏻

Завершаю серию постов о “ленивой загрузке”. Cегодня поговорим про Suspense, разберем что это такое и когда необходимо применять 🧐.
Перед 📖 прочтением этого поста рекомендую ознакомиться с материалами ниже 👇🏻 (необязательно, но полезно):

⚙️ Dynamic imports
⚙️ CRP
⚙️ React.Lazy

❓ Suspense — что это ❓

Простыми словами это компонент, который позволяет задерживать рендеринг дочерних компонентов, пока не завершатся асинхронные операции (например: загрузка данных).

Благодаря fallback, можно показать заглушку (спиннер, лоадер, скелетон), вместо того чтобы отображать "белый экран” во время ожидания⏱️.

⁉️ Как работает

📎 Останавливает рендеринг дочерних компонентов, если хотя бы один из них ожидает данных.
📎 Показывает fallback вместо контента, пока данные загружаются.
📎 Продолжает рендер, когда все асинхронные операции завершены.

❓ Когда применяется

1️⃣ Код-сплиттинг (React.lazy)

Позволяет лениво загружать компоненты и показывать fallback, пока они загружаются.

const LazyComponent = React.lazy(() => import("./LazyComponent"));

const App = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

🔥 Преимущество: загружаются только необходимые части кода, а не весь бандл сразу.

2️⃣ Асинхронные запросы с use (React 18+)

const Title = () => {
  const data = use(fetchTitle());
  return <h1>{data.title}</h1>;
}

const App = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <Title />
    </Suspense>
  );
}

Многие frameworks поддерживают Suspense: Next.js, Remix, Relay, Gatsby, React-query и тд.

‼️ Важно: Suspense не отслеживает загрузку данных, выполняемую внутри useEffect или event handler.

3️⃣ Загрузка ресурсов (изображения, скрипты, шрифты)
Можно управлять состояниями загрузки ресурсов улучшая взаимодействие с пользователем во время ресурсоемких операций.

Как Suspense влияет на структуру рендеринга❓

Все дочерние компоненты внутри Suspense рассматриваются 👀 как единое целое.

Если хотя бы один компонент задерживается, то все компоненты внутри него будут заменены на fallback.

Что это значит❓

📌 Если несколько компонентов внутри Suspense загружаются асинхронно, UI покажет fallback до завершения всех загрузок.
📌 Упрощается управление состояниями загрузки, так как не нужно вручную проверять isLoading в каждом компоненте.

🛠 Bonus: Обработка ошибок

Suspense не обрабатывает ошибки автоматически, а просто приостанавливает рендеринг. Если в процессе загрузки данных (fetch(), useQuery(), use()) возникнет ошибка, React выбросит её в ближайший Error Boundary.

Если ErrorBoundary отсутствует, React крашнет всё приложение.

Я рекомендую 👍🏻 не писать обработчик самому, а использовать популярный пакет react-error-boundary.

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div>
      <h2>Ошибка: {error.message}</h2>
      <button onClick={resetErrorBoundary}>Попробовать снова</button>
    </div>
  );
}

const App = () => {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Suspense fallback={<Spinner />}>
        <AsyncComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Что можно делать в ErrorBoundary ❓

✔️ Показать альтернативный UI (например, "Ошибка загрузки данных").

✔️ Добавить кнопку "Попробовать снова" (resetErrorBoundary).

✔️ Логировать ошибку в Sentry или консоль.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#REACT