В React Suspense — это механизм для управления состоянием загрузки компонентов или данных, позволяющий показывать запасной UI (например, спиннер) пока основной контент загружается. Он тесно связан с разделением кода (code splitting), когда приложение разбивается на части, которые загружаются по мере необходимости, снижая первоначальный размер бандла и ускоряя загрузку.

React.lazy позволяет динамически импортировать компоненты, а Suspense оборачивает эти компоненты, показывая fallback UI во время загрузки.

Пример:

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

Таким образом, Suspense упрощает работу с асинхронными компонентами и улучшает UX при разделении кода.

Расскажи про Suspense и разделение кода (code splitting) в React.