شرح صفوف ومحتوى الفقرة
بما أن المكون المعرف عبر lazy() يُجلب بشكل غير متزامن عند عرضه الأول، تحتاج React لمعرفة ما يجب إظهاره للمستخدم خلال لحظات التحميل؛ ولذلك نحيط المكون الكسول بحد انتظار <Suspense fallback={...}>.
تقبل خاصية fallback أي عنصر JSX خفيف مثل بطاقة هيكلية مؤقتة (Skeleton)، ثم تستبدله React تلقائياً بالمكون الحقيقي فور اكتمال وصول الحزمة:
HTML
import { lazy, Suspense } from 'react';
const ReportChart = lazy(
() => import('./ReportChart.jsx')
);
function AnalyticsTab() {
return (
<Suspense fallback={<p>Loading report...</p>}>
<ReportChart />
</Suspense>
);
}