Piye carane Suspense lan React.lazy nyambut gawe kanggo code splitting?

Question

Accepted Answer

**`React.lazy`** muatake bundle JavaScript komponen **on demand** (mung nalika mula-mula render). **`Suspense`** nuduhake fallback UI yamanira lazy (utawa data-suspending) anak isih muat. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Mengapa iku penting: loading awal luwih cilik Tanpa code splitting, browser ngundhuh **kabeh** aplikasiku (kalebu library charting sing abot) sadeleng nuduhake apa-apa. Karo `lazy`, kode `Chart` dipecah dadi file dhewe lan dijemput mung nalika user tekan dheweke — nambah wektu loading awal lan Core Web Vitals. ## Piye Suspense ngordinasi iku Yamanira `Chart` suspend (bundle-nye durung siap), React "ngenteni" bagian kuwi saka wit lan render `Suspense` fallback paling cedhak, banjur ganti komponen nyata nalika muatake. Sasaoran tunggal bisa tutup sawetara anak lazy lan nuduhake fallback siji: ```jsx }>

``` ## Saluwire code splitting Suspense uga ngordinasi **data loading** karo framework/library sing "suspend" ing fetch pending, lan berpasangan karo **streaming SSR** (Next.js App Router) kanggo ngirim shell cepet lan stream bagian luwih adoh. Letakake wates kanthi bijak kanggo hindari shift layout gedhe lan jarring nalika konten muncul.