lazy memungkinkan Anda menangguhkan (defer) pemuatan kode komponen hingga komponen tersebut di-render untuk pertama kalinya.

const SomeComponent = lazy(load)

Referensi

lazy(load)

Panggil fungsi lazy di luar komponen apa pun untuk mendeklarasikan lazy-loaded komponen React:

import { lazy } from 'react';

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

Lihat contoh-contoh lainnya di bawah ini.

Parameter

  • load: Sebuah fungsi yang mengembalikan Promise atau thenable lain (sebuah objek yang mirip dengan Promise dan memiliki metode then). React tidak akan memanggil load sampai pertama kali Anda mencoba untuk me-render komponen yang dikembalikan. Setelah React pertama kali memanggil load, React akan menunggu sampai komponen itu selesai, dan kemudian me-render .default dari nilai yang telah diselesaikan sebagai komponen React. Baik Promise yang dikembalikan maupun nilai yang diselesaikan dari Promise akan dicache, sehingga React tidak akan memanggil load lebih dari satu kali. Jika Promise menolak (reject), React akan melempar (throw) alasan penolakan ke Error Boundary terdekat untuk ditangani.

Kembalian

lazy mengembalikan komponen React yang dapat Anda render di dalam tree. Ketika kode untuk komponen lazy masih dimuat, mencoba me-rendernya akan suspend. Gunakan <Suspense> untuk menampilkan indikator pemuatan ketika komponen tersebut dimuat.

Fungsi load

Parameter

load tidak menerima parameter.

Kembalian

Anda perlu mengembalikan sebuah Promise atau thenable lain (sebuah objek yang mirip dengan Promise dan memiliki metode then). Pada akhirnya, komponen ini harus diselesaikan ke obyek yang properti default-nya adalah sebuah tipe komponen React yang valid, seperti sebuah fungsi, memo, atau forwardRef komponen.

Penggunaan

Lazy-loading komponen dengan Suspense

Biasanya, Anda mengimpor komponen dengan deklarasi statis import :

import MarkdownPreview from './MarkdownPreview.js';

Untuk menunda pemuatan kode komponen ini hingga di-render untuk pertama kalinya, ganti import ini dengan:

import { lazy } from 'react';

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

Kode ini bergantung pada dynamic import(), yang mungkin memerlukan dukungan dari bundler atau framework yang Anda gunakan. Menggunakan pola ini memiliki syarat komponen lazy yang Anda impor harus diekspor sebagai ekspor default.

Setelah kode komponen Anda dimuat saat digunakan (on demand), Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen lazy atau salah satu induknya ke dalam <Suspense>:

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

Pada contoh ini, kode untuk MarkdownPreview tidak akan dimuat hingga Anda mencoba me-rendernya. Jika MarkdownPreview belum dimuat, Komponen Loading akan ditampilkan sebagai gantinya. Coba centang checkbox Lihat pratinjau:

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('Helo, **dunia**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Lihat pratinjau
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Pratinjau</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

Demo ini dimuat dengan penundaan buatan. Lain kali Anda menghapus centang dan mencentang checkbox Lihat pratinjau, Komponen Preview akan dicache, sehingga tidak akan ada status pemuatan. Untuk melihat status pemuatan lagi, Klik “Reset” pada sandbox.

Pelajari lebih lanjut tentang mengelola status pemuatan dengan Suspense.

Pemecahan Masalah

State komponen lazy saya disetel ulang secara tidak terduga

Jangan deklarasikan komponen lazy di dalam komponen lain:

import { lazy } from 'react';

function Editor() {
  // 🔴 Buruk: Ini akan menyebabkan semua status di-reset pada render ulang
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

Sebaiknya, selalu deklarasikan mereka di tingkat teratas modul Anda:

import { lazy } from 'react';

// ✅ Bagus: Mendeklarasikan komponen lazy di luar komponen Anda
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}
SebelumnyaforwardRefSelanjutnyamemo

Seberapa suka Anda dengan dokumentasi ini?