‏Suspense تو ری‌اکت چطور کار می‌کنه

این صفحه بخشی از مرجع رسمی ری‌اکته و کامپوننت رو توضیح می‌ده. کارِ اصلیش ساده‌ست: تا وقتی فرزندهاش کامل لود نشدن، یه UI جایگزین (fallback) نشون می‌ده. هر بخشی از اپت رو می‌تونی با یه مرز Suspense بپیچی و یه placeholder سبک مثل اسپینر یا اسکلتون به‌عنوان fallback بهش بدی:

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

توی این نمونه، تا وقتی کامپوننت Albums داره لیست آلبوم‌ها رو واکشی می‌کنه، ری‌اکت نزدیک‌ترین مرز Suspense بالاش رو به حالت نمایش fallback می‌بره؛ بعد که داده حاضر شد، Loading رو مخفی می‌کنه و Albums رو با داده نشون می‌ده.

یه نکته مهم که مستندات روش تأکید داره اینه که Suspense فقط توی موارد مشخصی فعال می‌شه: لود شدن تنبل کد کامپوننت با lazy، خوندن یه Promise با use (شامل داده‌ای که از Server Componentها استریم می‌شه)، لود شدن استایل‌شیت با precedence، و رسیدن HTML یه مرز بزرگ موقع رندر سرور جریانی. در مقابل، اگه داده رو بیرون از use مثلاً توی یه Effect یا هندلر رویداد واکشی کنی، مرز Suspense اصلاً فعال نمی‌شه.

طبق مستندات، به‌طور پیش‌فرض کل درختِ زیر یه Suspense به‌عنوان یه واحد در نظر گرفته می‌شه؛ یعنی حتی اگه فقط یکی از کامپوننت‌ها معلق بمونه، همه‌شون با هم جاشون رو به fallback می‌دن و بعد هم با هم ظاهر می‌شن. برای این‌که محتوا تیکه‌تیکه و همون‌طور که آماده می‌شه ظاهر بشه، باید مرزهای Suspense تودرتو بذاری.

چندتا رفتار ظریف دیگه هم هست که خوبه بدونی. اگه Suspense قبلاً محتوا رو نشون داده باشه و دوباره معلق بشه، fallback دوباره میاد مگه این‌که آپدیت از طریق startTransition یا useDeferredValue اومده باشه؛ این همون ترفندیه که می‌ذاره محتوای قدیمی رو موقع لود شدن نسخه تازه سرِ جاش نگه داری. ری‌اکت هم محتوای معلق رو حداکثر هر ۳۰۰ میلی‌ثانیه یه‌بار آشکار می‌کنه، برای همین مرزهایی که تو این بازه آماده می‌شن با هم نشون داده می‌شن.

نکات کلیدی:

• Suspense تا کامل لود شدن فرزندها یه fallback مثل اسپینر یا اسکلتون نشون می‌ده
• فقط توی موارد خاص فعال می‌شه: lazy، خوندن Promise با use، استایل‌شیت با precedence، و رندر سرور جریانی
• واکشی داده توی Effect یا هندلر رویداد مرز رو فعال نمی‌کنه
• کل درخت زیر یه مرز به‌صورت یه واحد رفتار می‌کنه؛ برای نمایش تدریجی باید مرز تودرتو بذاری
• با startTransition یا useDeferredValue می‌شه موقع آپدیت، محتوای قدیمی رو نگه داشت