Suspense Basics
Memahami React.lazy dan Suspense sebagai pola menunggu component yang dimuat secara lazy.
Tujuan belajar
- Menjelaskan React.lazy untuk memuat component secara lazy
- Menjelaskan fallback Suspense saat component belum siap
- Membedakan Suspense lazy loading dari data-fetching architecture
Isi lesson
5 blok- 1.Suspense memberi UI saat component sedang disiapkanBelum selesaiWajib
- 2.Lazy component di dalam SuspenseBelum selesaiWajib
- 3.Practice ini memeriksa struktur, bukan menjalankan dynamic importBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Suspense memberi UI saat component sedang disiapkan
Wajib`React.lazy` menunda pemuatan satu component sampai component itu benar-benar perlu dirender. Saat module component sedang dimuat, `<Suspense>` menampilkan fallback sementara. Pola ini berguna untuk bagian UI non-kritis yang tidak perlu ikut dimuat pada awal halaman.
Di module ini, Suspense dipakai hanya untuk lazy-loaded component. Kita belum membangun Suspense untuk data fetching, streaming, atau framework routing. Fokusnya adalah membaca hubungan sederhana antara component lazy, boundary Suspense, dan fallback yang tepat.
Bagian ini memengaruhi progres lesson.
Lazy component di dalam Suspense
Wajibimport { lazy, Suspense } from "react";
const ActivityPanel = lazy(() => import("./ActivityPanel"));
function ProfilePage() {
return (
<section>
<h1>Profil learner</h1>
<Suspense fallback={<p role="status">Memuat aktivitas...</p>}>
<ActivityPanel />
</Suspense>
</section>
);
}`lazy` menerima function dynamic import. Saat `ActivityPanel` belum siap, Suspense menampilkan fallback. Setelah module tersedia, React merender ActivityPanel di area yang sama.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibPractice ini memeriksa struktur, bukan menjalankan dynamic import
Practice workspace saat ini belum menyediakan module loader untuk file yang diimport secara dynamic. Karena itu, cek otomatis akan memeriksa struktur `lazy`, `Suspense`, dan fallback di tab TSX. Preview tidak menjalankan dynamic import pada latihan ini. Di Local React App, kamu dapat mencoba pola ini dengan file component sungguhan.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususLazy-load activity panel dengan Suspense
Latihan menulis struktur React.lazy dan Suspense untuk panel aktivitas yang tidak kritis saat halaman pertama dibuka.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- React.lazy menunda pemuatan module component sampai dibutuhkan.
- Suspense menampilkan fallback selama component lazy belum siap.
- Fallback Suspense perlu menjelaskan area yang sedang dimuat.
- Module ini tidak memakai Suspense untuk data fetching atau streaming.
- Berikutnya, kamu akan membedakan retry request dan reset UI setelah feature gagal.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Suspense memberi UI saat component sedang disiapkan.