React.lazy iċċarica l-bundle JavaScript ta' komponent fuq demand (biss meta jirrendi l-ewwel darba). Suspense turi fallback UI filwaqt li kwalunkwe child lazy (jew data-suspending) għadu qed iċċarika.
jsx
= .( ());
() {
(
);
}
React.lazy iċċarica l-bundle JavaScript ta' komponent fuq demand (biss meta jirrendi l-ewwel darba). Suspense turi fallback UI filwaqt li kwalunkwe child lazy (jew data-suspending) għadu qed iċċarika.
= .( ());
() {
(
);
}
Bdun code splitting, il-browser iċċarika l-app kollu tiegħek (inkluż il-library tal-charting tqila) qabel ma juri xi ħaġa. Ma' lazy, il-code tal-Chart jinqasam f'file tiegħu stess u jiġi ftuqq biss meta l-user effettivament jilħaqqu — itejjeb il-initial load time u Core Web Vitals.
Meta Chart tispendu (il-bundle tiegħa m'għadix ready), React "twaqqaf" dik il-parti tal-tree u tindirizza l-fallback tal-Suspense l-eqreb minflok, imbagħad tibdel il-komponent reali ladarba jiċċarika. Boundary wieħed jista' jigħlaq diversi children lazy u juri fallback wieħed:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense tikoordina wkoll data loading ma' frameworks/libraries li "tispendu" fuq pending fetch, u tgħaqqad ma' streaming SSR (Next.js App Router) biex tibgħat fast shell u tstream il-partijiet ileħħaq ta' wara. Poġġi boundaries b'ħsieb biex tevita shifts layout kbar u jarring meta l-content tippop in.