Suspense اور React.lazy کوڈ تقسیم کے لیے کیسے کام کرتے ہیں؟

Question

Accepted Answer

**`React.lazy`** ایک جزو کے JavaScript بنڈل کو **on demand** (صرف جب یہ پہلے بار رینڈر ہو) لوڈ کرتا ہے۔ **`Suspense`** جب کوئی بھی lazy (یا data-suspending) بچے ابھی لوڈ ہو رہے ہوں تو ایک fallback UI دکھاتا ہے۔ ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## یہ کیوں اہم ہے: چھوٹی ابتدائی لوڈنگ کوڈ تقسیم کے بغیر، براؤزر کسی بھی چیز کو دکھانے سے پہلے آپ کی **مکمل** ایپلیکیشن (بھاری charting لائبریری سمیت) ڈاؤن لوڈ کرتا ہے۔ `lazy` کے ساتھ، `Chart` کا کوڈ اپنی خود کی فائل میں الگ ہے اور صرف اس وقت لایا جاتا ہے جب صارف واقعی اس تک پہنچتا ہے — ابتدائی لوڈ ٹائم اور Core Web Vitals کو بہتر بناتا ہے۔ ## Suspense کیسے ہم آہنگی کرتا ہے جب `Chart` معطل ہوتا ہے (اس کا بنڈل تیار نہیں ہے)، React درخت کے اس حصے کو "روک" دیتا ہے اور قریب ترین `Suspense` fallback کو بجائے اس کے رینڈر کرتا ہے، پھر جب یہ لوڈ ہو تو حقیقی جزو میں تبدیل کرتا ہے۔ ایک واحد boundary متعدد lazy بچوں کو لپیٹ سکتا ہے اور ایک fallback دکھا سکتا ہے: ```jsx }>

``` ## کوڈ تقسیم سے آگے Suspense **ڈیٹا لوڈنگ** کو بھی ہم آہنگ کرتا ہے frameworks/libraries کے ساتھ جو pending fetch پر "معطل" کرتے ہیں، اور **streaming SSR** (Next.js App Router) کے ساتھ جوڑا جاتا ہے تیز شیل بھیجنے اور سست حصے stream کرنے کے لیے۔ boundaries کو احتیاط سے رکھیں بڑی، جھلملاتی layout shifts سے بچنے کے لیے جب مواد pop ہو۔