lazy memungkinkan Anda menunda pemuatan kode komponen hingga komponen tersebut dirender untuk pertama kalinya.

const SomeComponent = lazy(load)

Referensi

lazy(load)

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

import { lazy } from 'react';

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

Lihat contoh-contoh lainnya di bawah ini.

Parameters

  • load: Sebuah fungsi yang mengembalikan Promise atau thenable lain (sebuah objek yang mirip dengan Promise dan memiliki metode then). React tidak akan memanggil load sempai pertama kali And mencoba untuk merender komponen yang dikembalikan. Setelah React pertama kali memanggil load, React akan menunggu sampai komponen itu selesai, dan kemudian merender 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, React akan throw alasan penolakan ke Error Boundary terdekat untuk ditangani.

Returns

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

fungsi load

Parameters

load tidak menerima parameter.

Returns

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 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 jkode komponen ini hingga dirender 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.

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

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

Pada contoh ini, kode untuk MarkdownPreview tidak akan dimuat hingga Anda mencoba merendernya. Jika MarkdownPreview belum dimuat, Loading atau indikator akan ditampilkan sebagai gantinya. Coba centang checkbox ini:

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('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</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, 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

lazy komponen saya disetel ulang secara tidak terduka

Jangan deklarasikan lazy komponen didalam komponen lain:

import { lazy } from 'react';

function Editor() {
  // 🔴 Bad: This will cause all state to be reset on re-renders
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

Sebaiknya, selalu deklarasikan mereka di tingkat teratas modul Anda:

import { lazy } from 'react';

// ✅ Good: Declare lazy components outside of your components
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

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

How do you like these docs?