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

Что проверяют

Понимаете ли вы механику приостановки и знаете ли, что ошибки ловит другой механизм.

Как отвечать

Границы ожидания это компонент, показывающий запасной интерфейс, пока дочернее дерево не готово. Ленивая загрузка оборачивает динамический импорт компонента, превращая его в отдельный кусок сборки.

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

const Editor = lazy(() => import("./Editor"));

<Suspense fallback={<Skeleton />}>
  <Editor />
</Suspense>

Практическая ценность: разделение сборки. Тяжёлый редактор, график или библиотека карт не попадают в основной файл и загружаются только тем, кто до них дошёл.

Что важно знать:

• границу ставят осознанно. Слишком глубоко значит мигание индикаторов в каждом углу, слишком высоко значит пустой экран вместо частично готовой страницы;
• несколько ленивых компонентов внутри одной границы дают один общий индикатор и появятся вместе;
• ошибку загрузки границы ожидания не ловят. Обрыв сети при подгрузке куска это обычное исключение, и его перехватывает граница ошибок. Их ставят вместе, иначе неудачная загрузка обрушит экран;
• переходы позволяют не показывать запасной интерфейс при обновлении уже отрисованного содержимого: старое остаётся на экране, пока грузится новое. Без этого смена вкладки давала бы мигание.

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

Где спотыкаются

Не ставят границу ошибок и роняют экран при обрыве загрузки.

Оборачивают в ленивую загрузку мелкие компоненты, плодя сетевые запросы.

Ставят границы слишком глубоко и получают мигающий интерфейс.

Ждут, что запасной интерфейс покажется при повторной загрузке данных без перехода.