> Что такое React Suspense и как он работает с React.lazy (React)

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

React.lazy - это функция, которая позволяет динамически импортировать компонент с помощью import(). Она возвращает компонент, который можно обернуть в <Suspense>. Пока код компонента загружается, Suspense отображает указанный fallback.

Пример:

JSX
import React, { Suspense } from 'react';

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

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

Как это работает: при рендеринге LazyComponent React видит, что его код ещё не загружен, и «приостанавливает» рендеринг дерева, показывая fallback. Когда промис import() разрешается, React перерисовывает компонент с загруженным кодом. Suspense также поддерживает вложенность и может комбинироваться с другими асинхронными источниками (например, с библиотеками для работы с данными, такими как Relay).