Suspense और React.lazy कोड विभाजन के लिए कैसे काम करते हैं?

Question

Accepted Answer

**`React.lazy`** एक घटक के JavaScript बंडल को **मांग पर** लोड करता है (केवल जब यह पहले रेंडर हो)। **`Suspense`** किसी भी आलसी (या डेटा-स्थगित) बच्चे के अभी भी लोड होने के दौरान एक फॉलबैक UI दिखाता है। ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## यह क्यों महत्वपूर्ण है: छोटा प्रारंभिक लोड कोड विभाजन के बिना, ब्राउज़र आपके **पूरे** ऐप (भारी चार्टिंग लाइब्रेरी सहित) को कुछ भी दिखाने से पहले डाउनलोड करता है। `lazy` के साथ, `Chart` का कोड अपनी फाइल में विभाजित किया जाता है और केवल तभी लाया जाता है जब उपयोगकर्ता वास्तव में इस पर पहुंचता है — प्रारंभिक लोड समय और Core Web Vitals में सुधार करता है। ## Suspense कैसे इसे समन्वय करता है जब `Chart` स्थगित हो जाता है (इसका बंडल तैयार नहीं है), React पेड़ के उस हिस्से को "रोक" देता है और निकटतम `Suspense` फॉलबैक को बजाय रेंडर करता है, फिर एक बार लोड होने के बाद वास्तविक घटक में स्वैप कर देता है। एक एकल सीमा कई आलसी बच्चों को लपेट सकती है और एक फॉलबैक दिखा सकती है: ```jsx }>

``` ## कोड विभाजन से परे Suspense **डेटा लोडिंग** को भी समन्वय करता है frameworks/लाइब्रेरीज के साथ जो लंबित फेच पर "स्थगित" होती हैं, और **streaming SSR** (Next.js App Router) के साथ जोड़ी जाती है ताकि एक तेज़ शेल भेजा जा सके और धीमे भागों को स्ट्रीम किया जा सके। सीमाओं को विचारशील तरीके से रखें बड़ी, चौंकाने वाली लेआउट पारियों से बचने के लिए जब सामग्री पॉप हो।