ری ایکٹ میں لیزی لوڈنگ

React میں Lazy Loading

بڑی React ایپس بڑے JavaScript bundles تخلیق کرتی ہیں۔ بڑے bundles آپ کی سائٹ کی رفتار کم کر دیتے ہیں۔ صارفین کو آپ کی ایپ کے ساتھ بات چیت کرنے کے لیے زیادہ دیر انتظار کرنا پڑتا ہے۔ یہ آپ کے صارف کے تجربے (user experience) کو متاثر کرتا ہے۔

Lazy loading اس کا حل ہے۔ یہ components کو صرف اس وقت لوڈ کرتی ہے جب صارفین کو ان کی ضرورت ہو۔ آپ ایک ہی وقت میں سب کچھ لوڈ کرنا بند کر دیتے ہیں۔

Lazy loading کے فوائد:

• ابتدائی bundle کا چھوٹا سائز
• صفحات کا تیزی سے لوڈ ہونا
• بہتر صارف کا تجربہ (user experience)
• بینڈوتھ کا کم استعمال
• بہتر Core Web Vitals

React.lazy() کا استعمال کیسے کریں React components کو متحرک (dynamically) طور پر امپورٹ کرنے کے لیے lazy() نامی ایک فنکشن فراہم کرتا ہے۔ React کوڈ کو صرف اس وقت ڈاؤن لوڈ کرتا ہے جب وہ component کو رینڈر (render) کرتا ہے۔

مثالی کوڈ:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

آپ کو lazy components کے ساتھ Suspense کا استعمال کرنا چاہیے۔ Suspense اس وقت ایک fallback UI دکھاتا ہے جب component لوڈ ہو رہا ہو۔

مثالی کوڈ:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

کامیابی کے لیے دو اصول:

• آپ کے components میں default exports کا استعمال ہونا چاہیے۔
• اپنے lazy imports کو اپنے component functions سے باہر ڈکلیئر کریں۔

کیا آپ اپنے پروجیکٹس میں lazy loading کا استعمال کرتے ہیں؟ نیچے کمنٹ کریں۔ میں آپ کو جواب دوں گا۔

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk