lazy, bileşen kodunun ilk kez render edilene kadar yüklenmesini ertelemek için kullanılır.

const SomeComponent = lazy(load)

Referans

lazy(load)

Lazy yüklenen React bileşeni tanımlamak için bileşenlerinizin dışında lazy’yi çağırın:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Daha fazla örnek için aşağıya bakın.

Parametreler

  • load: Promise veya başka bir thenable (then metoduna sahip Promise benzeri bir nesne) döndürmeniz gerekir. React, dönen bileşeni ilk kez render etmeye yeltenene kadar load’ı çağırmaz. React load’ı ilk çağırdığında, çözümlenene (resolve) kadar bekler, ardından çözümlenmiş değeri React bileşeni olarak render eder. Hem Promise hem de Promise’in çözümlenmiş değeri ön belleğe (cache) alınacağından, React load’ı birden fazla kez çağırmaz. Promise reddedilirse (reject), React reddetme nedenini ele alması için throw ile en yakındaki Error Boundary’ye gönderir.

Dönüş değeri

lazy, ağacınıza render edebileceğiniz bir React bileşeni döndürür. Lazy bileşenin kodu yüklenirken, render etme işlemi askıya alınır. Yükleme esnasında yükleniyor göstergesi görüntülemek için <Suspense> kullanın.

load fonksiyonu

Parametreler

load parametre almaz.

Dönüş değerleri

Promise veya başka bir thenable (then metoduna sahip Promise benzeri bir nesne) döndürmeniz gerekir. Bu nesne; fonksiyon, memo ya da forwardRef’de olduğu gibi geçerli bir React bileşen tipine çözülmelidir.

Kullanım

Suspense ile lazy yüklenen bileşenler

Bileşenlerinizi çoğunlukla statik import tanımıyla içe aktarırsınız:

import MarkdownPreview from './MarkdownPreview.js';

Bileşen kodunun yüklenmesini ilk render’a kadar ertelemek istiyorsanız, şu içe aktarmayla değiştirin:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

Bu kod, dinamik import()’a dayanır. Kullanmak için paketleyicinizin (bundler) veya framework’ünüzün desteklemesi gerekir.

Artık bileşeninizin kodları talep edildiğinde (on demand) yüklendiğine göre, yüklenme aşamasında yerine neyin görüntüleneceğini belirtmeniz gerekir. Bunu, lazy bileşeni ya da üst bileşenlerinden birini <Suspense> sınırına (boundary) sararak yapabilirsiniz:

<Suspense fallback={<Loading />}>
  <h2>Ön İzleme</h2>
  <MarkdownPreview />
</Suspense>

Bu örnekte, MarkdownPreview’ın kodu render edilene kadar yüklenmez. MarkdownPreview yüklenene kadar yerine Loading gösterilir. Onay kutusunu işaretlemeyi deneyin:

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Merhaba, **dünya**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Ön izlemeyi göster
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Ön İzleme</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Yükleniyor durumunu görebilmeniz için sabit bir gecikme ekleyin
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

Bu demo, yapay bir gecikmeyle yüklenir. Bileşen yüklendikten sonras işareti kaldırıp yeniden işaretlediğinizde Preview ön belleğe alındığı için yükleniyor durumu olmaz. Yükleniyor durumunu yeniden görmek isterseniz, sandbox’daki “Sıfırla” butonuna tıklayın.

Suspense ile yükleniyor durumlarını yönetmek hakkında daha fazla bilgi edinin.

Sorun giderme

lazy bileşenimdeki state’ler beklenmedik şekilde sıfırlanıyor

lazy bileşenleri diğer bileşenlerin içerisinde tanımlamayın:

import { lazy } from 'react';

function Editor() {
  // 🔴 Kötü: Bu yeniden render'larda tüm state'lerin sıfırlanmasına neden olur
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

Bunun yerine daima modülünüzün en üst kapsamında tanımlayın:

import { lazy } from 'react';

// ✅ Güzel: Lazy bileşenleri bileşenlerinizin dışında tanımlayın
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}
PreviousforwardRef
Nextmemo