React.lazy एक घटकाचा JavaScript बंडल मागणी वर लोड करतो (फक्त जेव्हा ते प्रथम रेंडर होते तेव्हा). Suspense कोणतीही lazy (किंवा data-suspending) child अजून लोड होत असताना एक fallback UI दर्शवतो.
jsx
= .( ());
() {
(
);
}
React.lazy एक घटकाचा JavaScript बंडल मागणी वर लोड करतो (फक्त जेव्हा ते प्रथम रेंडर होते तेव्हा). Suspense कोणतीही lazy (किंवा data-suspending) child अजून लोड होत असताना एक fallback UI दर्शवतो.
= .( ());
() {
(
);
}
कोड विभाजन न करता, ब्राउজर तुमचा संपूर्ण अॅप (हेवी चार्टिंग लायब्ररी सह) डाउनलोड करतो कोणतीही गोष्ट दर्शवण्यापूर्वी. lazy सह, Chartचा कोड त्याच्या स्वतःच्या फाइलमध्ये विभाजित केला जातो आणि फक्त तेव्हा आणला जातो जेव्हा वापरकर्ता खरोखर त्यापर्यंत पोहोचतो — प्रारंभिक लोड वेळ आणि Core Web Vitals सुधारते.
जेव्हा Chart suspends होतो (त्याचा बंडल तयार नाही), React त्या भागाचा "विराम" घेतो आणि त्याऐवजी सर्वात जवळचा Suspense fallback रेंडर करतो, नंतर ते लोड होताच खरा घटक बदल करतो. एक सीमा अनेक lazy मुलांना गुंडाळू शकते आणि एक fallback दर्शवू शकते:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense डेटा लोडिंग देखील समन्वय करतो फ्रेमवर्क/लायब्रेरीसह जी pending fetch वर "suspend" करतात, आणि streaming SSR (Next.js App Router) सह जोड्या करतो एक वेगवान shell पाठवण्यासाठी आणि हळू भाग स्ट्रीम करण्यासाठी. मोठ्या, आघाताच्या लेआउट शिफ्टच्या टाळण्यासाठी सीमा विचारशीलतेने ठेवा जेव्हा सामग्री पॉप होते.