Для чего используется React.lazy и как его применять?

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

React.lazy — это встроенная функция React, которая позволяет отложить загрузку компонента до момента его первого рендеринга. Вместо того чтобы включать весь код компонента в основной бандл приложения, React.lazy использует динамический импорт, который создает отдельный чанк. Этот чанк загружается асинхронно, когда компонент впервые требуется.

Основная цель — уменьшить время начальной загрузки, особенно для больших приложений с множеством маршрутов или редко используемых функций. Это часть техники code splitting, которая разбивает код на части и загружает их по мере необходимости.

Как применять React.lazy?

Для использования React.lazy необходимо импортировать компонент через динамический импорт и обернуть его в компонент Suspense. Suspense принимает prop fallback, который отображается, пока ленивый компонент загружается. Обычно это спиннер или заглушка.

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

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

В этом примере HeavyComponent будет загружен только тогда, когда App рендерится. Если компонент не используется сразу, его код не попадает в основной бандл.

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

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

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Такой подход сокращает начальный размер бандла и ускоряет загрузку первой страницы.

Вывод

React.lazy — это простой и эффективный способ оптимизации производительности React-приложений. Его стоит применять для крупных компонентов, которые не нужны при первом рендере, особенно для маршрутов или модальных окон. Это помогает снизить время загрузки и улучшить пользовательский опыт.