React.lazy nedir?

React.lazy ile bileşenleri tembel yüklemeyi öğrenirsin.

React.lazy nedir?

React.lazy, bir bileşeni ilk çizimde değil, ihtiyaç duyulduğunda yükler. Bu, kod bölme (code splitting) sağlar; uygulamanın başlangıç paketi küçülür.

Kullanımı basittir: const Heavy = React.lazy(() => import('./Heavy')). Bileşen çağrıldığında ilgili modül tarayıcıdan yüklenir. Bu süre zarfında bir yükleme göstergesi gerekir.

İşte burada Suspense devreye girer; yükleme tamamlanana kadar bir yedek içerik gösterir.

Suspense sınırı

Suspense bileşeni, alt bileşenlerin yüklenmesini beklerken bir yedek içerik gösterir. fallback prop'u yükleme sırasında çizilecek içeriği alır.

Örnek: <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Heavy yüklenene kadar Spinner çizilir; yükleme bitince Heavy çizilir.

Suspense'i lazy bileşenin üstüne sarmal olarak koyarsın. Birden fazla lazy bileşen varsa tek Suspense hepsini sarabilir.

Uygulama lazy ve Suspense

Aşağıdaki iskeleti tamamla. Heavy bileşenini React.lazy ile tanımla; App bileşeni <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense> döndürsün. Dışa aktar.

Örnek çözümü göster

import { lazy, Suspense } from "react";

const Heavy = lazy(() => import("./Heavy"));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Heavy />
    </Suspense>
  );
}

export default App;

Kendini test et

React.lazy ne sağlar?
- Kod bölme
- Daha hızlı çizim
- Daha az state
- Daha az prop
Cevabı göster

Kod bölme — React.lazy kod bölme sağlar; başlangıç paketi küçülür.

lazy çağrısı

const Heavy = React.lazy(() => ____);

Cevabı göster

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

React.lazy nedir: kavramları eşleştir

React.lazy

Dinamik ithalat
Suspense

Yükleme sınırı
fallback

Yedek içerik
import()

Modül yükler

Sıradaki ders: Suspense sınırı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler