Suspense (Suspense)

قابلیت Suspense در React کمک می کند وقتی داده یا کد هنوز لود نشده، یک حالت «در حال لود شدن» تمیز نشان بدهیم. یعنی به جای صفحه خالی، یک متن یا کامپوننت لودینگ نمایش دهیم تا کاربر حوصله اش سر نرود.

Suspense در React چیست؟

Suspense در React یعنی بتوانیم تا وقتی یک بخش آماده نیست، محتوای جایگزین نشان دهیم. این محتوا می تواند یک متن ساده، اسپینر یا حتی یک کامپوننت کامل باشد.

دو استفاده خیلی معمول از Suspense در React این ها هستند:

• گرفتن داده در فریم ورک هایی که از Suspense پشتیبانی می کنند.
• لود تنبل (lazy loading) کامپوننت ها با تابع React.lazy().

نکته: وقتی اسم Suspense در React را می شنوی، همیشه یاد «نمایش لودینگ شیک تا آماده شدن محتوا» بیفت.

استفاده از Suspense در React

اگر یک کامپوننت دیر لود می شود، آن را داخل کامپوننت Suspense قرار می دهیم. پراپ fallback مشخص می کند تا آماده شدن کامپوننت اصلی، چه چیزی نمایش داده شود.

در این مثال، کامپوننت Fruits دو ثانیه طول می کشد تا لود شود. پس تا آماده شدن، متن Loading... را می بینیم.

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Fruits from './Fruits';

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

createRoot(document.getElementById('root')).render(
  <App />
);

مشاهده در ادیتور

اینجا کامپوننت Fruits داخل Suspense قرار گرفته است. اگر واکشی داده یا لود کد طول بکشد، کاربر فقط پیام Loading... را می بیند، نه صفحه خالی یا فریز شده.

Suspense و lazy loading در React

گاهی کار کامپوننت آن قدر سریع است که عملاً صفحه لودینگ دیده نمی شود. اما با lazy loading می توانیم خود لود شدن کامپوننت را کمی زمان بر کنیم و لودینگ معنادار داشته باشیم.

اول یک مثال بدون lazy داریم. اینجا Cars مستقیم ایمپورت می شود، پس معمولاً کاربر اصلاً لودینگ را متوجه نمی شود.

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Cars from './Cars';

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

createRoot(document.getElementById('root')).render(
  <App />
);

مشاهده در ادیتور

حالا همان مثال را با lazy loading می نویسیم. این بار کامپوننت Cars به صورت تنبل لود می شود؛ یعنی فقط وقتی لازم است، کدش دانلود می شود.

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Cars = lazy(() => {
  return import('./Cars');
});

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

createRoot(document.getElementById('root')).render(
  <App />
);

مشاهده در ادیتور

تابع lazy یک کامپوننت را فقط زمانی لود می کند که واقعاً به آن نیاز داریم. Suspense هم در این فاصله کوتاه، fallback مشخص شده را نمایش می دهد؛ مثلاً متن Loading... یا هر UI دلخواه.

چند کامپوننت داخل یک Suspense

یک کامپوننت Suspense می تواند چند کامپوننت lazy را همزمان بپوشاند. تا وقتی همه آن ها آماده شوند، همان fallback نمایش داده می شود.

در مثال زیر، Header و Sidebar و Content همگی با lazy لود می شوند. یک Suspense همه آن ها را هندل می کند.

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Header = lazy(() => {
  return import('./Header');
});

const Content = lazy(() => {
  return import('./Content');
});

const Sidebar = lazy(() => {
  return import('./Sidebar');
});

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Header />
        <div
          style={{
            display: 'flex'
          }}
        >
          <Sidebar />
          <Content />
        </div>
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

مشاهده در ادیتور

اینجا اگر هرکدام از Header یا Sidebar یا Content دیرتر لود شوند، همان fallback مشترک نمایش داده می شود. این الگو برای صفحات داشبوردی و لAYOUT های بزرگ خیلی مفید است.

گام به گام تمرین با Suspense

برای تمرین، یک پروژه خیلی ساده بساز و خودت Suspense در React را امتحان کن. این مراحل را دنبال کن.

1. یک پروژه React ساده بساز یا پروژه فعلی را باز کن.
2. یک کامپوننت جدید مثل Fruits بساز که کمی تأخیر داشته باشد.
3. در فایل App، کامپوننت Fruits را ایمپورت کن.
4. Fruits را داخل کامپوننت Suspense قرار بده و fallback تنظیم کن.
5. حالا همان کامپوننت را با lazy و lazy(() => import(...)) بازنویسی کن.

نکته: هر وقت دیدی صفحه برای چند لحظه خالی می ماند، به این فکر کن که آیا یک Suspense تمیز می تواند آن تجربه را بهتر کند یا نه.

جمع بندی سریع Suspense

• Suspense در React برای نمایش حالت لودینگ موقت استفاده می شود.
• پراپ fallback مشخص می کند چه چیزی موقع انتظار نمایش داده شود.
• با lazy، کد کامپوننت ها تنبل و فقط در زمان نیاز لود می شود.
• یک Suspense می تواند چند کامپوننت lazy را همزمان مدیریت کند.
• لینک Suspense در React را برای مرور دوباره نگه دار.