React.lazy и Suspense: ленивая загрузка компонентов

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

Зачем это нужно?

• Сокращает время первой загрузки приложения
• Делит код на отдельные чанки
• Загружает тяжёлые компоненты по мере необходимости
• Особенно важно для SPA и мобильных пользователей

React.lazy

Это функция, которая позволяет динамически импортировать компонент и возвращать его как обычный React-компонент.

Синтаксис:

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

Что такое Suspense?

Так как загрузка ленивого компонента может занять время, React предлагает компонент Suspense, в котором указывается fallback — что показать, пока компонент загружается.

Пример Suspense

import React, { Suspense } from "react";

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

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

Пример с маршрутизацией

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

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<p>Загрузка страницы...</p>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Важно знать

• Работает только для компонентов по умолчанию. Для других случаев (функции, модули) — используйте import() напрямую.
• Suspense пока не поддерживает данные (например, загрузку API) — для этого используют React Query, Relay, RSC, или Suspense for data (в будущем).
• Можно обернуть сразу несколько компонентов в один Suspense.

Польза для производительности

Итог

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