Что такое React.lazy?

React.lazy — функция для ленивой загрузки компонента: его код выделяется в отдельный чанк и скачивается только при первом рендере.

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

import { lazy, Suspense } from 'react';

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

const App = () => (
  <Suspense fallback={<PageSkeleton />}>
    <ReportPage />  {/* чанк грузится при первом показе */}
  </Suspense>
);

• Принимает функцию, возвращающую динамический import(); модуль должен иметь default export с компонентом.
• Пока чанк грузится, ближайший <Suspense> показывает fallback — без него будет ошибка.

Какую проблему решает

Без code splitting весь код приложения попадает в один бандл: пользователь ждёт загрузку страницы отчётов, даже если пришёл на логин. React.lazy + динамический import заставляют сборщик (Vite/webpack) выделить отдельные чанки и грузить их по требованию — быстрее первая отрисовка.

Где применять

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

Нюансы

• Ошибка загрузки чанка (сеть, новый деплой) — ловится Error Boundary; полезно предусмотреть retry.
• Не стоит дробить всё подряд: слишком много мелких чанков — лишние сетевые раунды. Осмысленно — маршруты и действительно тяжёлые блоки.
• Прелоад: можно заранее вызвать import('./ReportPage') при наведении на ссылку.
• Именованные экспорты требуют обёртки: lazy(() => import('./m').then((m) => ({ default: m.Report }))).

Коротко для собеседования

React.lazy оборачивает динамический import() и делает компонент лениво загружаемым отдельным чанком; во время загрузки Suspense показывает fallback. Основное применение — code splitting по маршрутам и тяжёлым виджетам, чтобы ускорить первую загрузку. Ошибки чанков ловят Error Boundary.