Latihan 1: Suspense & Lazy — React

Latihan 1 dari materi Suspense & Lazy di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Muat HeavyChart dengan lazy dan tampilkan fallback-nya dengan Suspense. Editor latihan gak punya file lain untuk di-import, jadi kode awal sudah punya tiruannya: muatGrafik() mengembalikan promise yang selesai 300 ms kemudian dengan { default: Grafik }, persis seperti import("./Grafik"). Kode awal juga sudah punya state tampil, tombol #load, dan #placeholder. Biarkan semuanya.

Di luar App, buat const HeavyChart = lazy(muatGrafik).
Di dalam App, saat tampil true, render <HeavyChart /> di dalam <Suspense fallback={<p id="fallback">Sedang memuat...</p>}>.

lazy dan Suspense sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Yang dicek:

Sebelum diklik, #placeholder berbunyi persis Klik tombol untuk memuat, dan #fallback belum ada.
Sesudah #load diklik, selama chunk-nya belum datang, #fallback berbunyi persis Sedang memuat....
Begitu datang, #lazy-content berbunyi persis Komponen Berhasil Dimuat!, dan #placeholder sudah hilang.
Kodemu membuat komponen dengan lazy( di luar App (const HeavyChart = lazy(...) di awal baris), dan memakai <Suspense fallback=...>.

Hint

lazy menerima function yang mengembalikan promise berisi { default: Komponen }, dan muatGrafik sudah persis begitu. Suspense menampilkan fallback-nya selama komponen lazy di dalamnya belum siap.
Tulis lazy sekali di luar App, seperti import biasa. Di dalam App, bungkus <HeavyChart /> dengan <Suspense fallback={...}>, dan render keduanya cuma saat tampil true.
const HeavyChart = lazy(muatGrafik) Di App: {tampil && (<Suspense fallback={<p id="fallback">Sedang memuat...</p>}><HeavyChart /></Suspense>)}

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Suspense & Lazy — React

Hint

Memperbarui Aplikasi