Для чего нужен React.lazy? Какой бенефит он даёт и как работает под капотом?

React.lazy используется для динамического импортирования компонентов, что позволяет реализовать ленивую загрузку (code splitting). Это значит, что компонент загружается только тогда, когда он действительно нужен, а не при первоначальной загрузке приложения. Такой подход уменьшает размер основного бандла и ускоряет время загрузки страницы.

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

Пример использования:

import React, { Suspense } from 'react';

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

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

Таким образом, React.lazy помогает оптимизировать производительность приложения за счёт отложенной загрузки тяжелых компонентов.