React.lazy Та suspense — ледачі компоненти в React

React.lazy та Suspense — це інструменти в React, які дозволяють ліниво завантажувати компоненти, тобто лише тоді, коли вони насправді потрібні. Це називається розділенням коду, і це допомагає покращити продуктивність застосунку.

Чому це потрібно?

Зменшує час первинного завантаження застосунку
Розділяє код на окремі частини
Завантажує важкі компоненти за потребою
Особливо важливо для SPA та мобільних користувачів

React.lazy

Це функція, яка дозволяє динамічно імпортувати компонент і повертати його як звичайний React компонент.

Синтаксис:

jsx

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

Що таке Suspense?

Оскільки ліниве завантаження компонентів може займати час, React пропонує компонент Suspense, де ви вказуєте fallback — що показувати, поки компонент завантажується.

Приклад Suspense

jsx

import React, { Suspense } from "react";

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

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

Приклад маршрутизації

jsx

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>Loading page...</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 потрібен для рендеринг заповнювача під час завантаження
Це допомагає зробити застосунки швидшими та ефективнішими

Порада:

Використовуйте React.lazy для лінивого завантаження сторінок, модальних вікон, великих блоків та інших рідко використовуваних компонентів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань