تیم ری‌اکت دارن چیکار میکنن؟ (قسمت سوم)

خب کامیت امروز هم در راستای همون فیچر Suspense و SuspenseList عه. چون آخر هفته اس یکم حجم کامیت ها کم شده و همه تو تعطیلات به‌سر میبرن, ولی دیروز سباستین یه کامیت کرد که نظرمو جلب کرد.

این اسم PR ایه که باز کرده‌: Expire rendering the tail of SuspenseList after a timeout

قضیه چیه؟ اینجوری که خود سباستین توضیح میده بعضی وقتا هست که ما کل لیستمون رو لود کردیم, ینی دیتای همه کامپوننت ها حاضرن اما هر کامپوننت واسه رندر شدن مقدار زیادی CPU مصرف میکنه. در این صورت اگه فرض کنیم ۱۰۰ تا کامپوننت توی لیستمون هستن و هرکدوم ۱۰۰ میلی ثانیه طول میکشن برای رندر شدن, حتی با وجود اینکه دیتای همشون لود شده اما باز ۱۰۰۰۰ میلی ثانیه یعنی ۱۰ ثانیه طول میکشه تا همه آیتم ها رندر بشن و بشه دیدشون. درواقع مشکل اینجاس که کامپوننت های اول لیست و آخر لیست باهم باید نمایش داده بشن (together).

اما وقتی کامپوننت های پایینتر بدلیل رندر کندشون دارن مانع کامپوننت های بالایی میشن, این کامیت این اجازرو به ری‌اکت میده که اگر رندر شدن لیست از یه تایم مشخصی (درحال حاضر ۵۰۰ میلی ثانیه) بیشتر طول کشید, هرچیزی که تا الان رندر کرده رو نمایش بده و برای بقیه placeholder رو mount کنه و توی دفعه بعدی بقیه لیست رو رندر کنه.

آپدیت:
برخی ایراد گرفتن که وقتی کسی revealOrder رو برابر با together گذاشته یعنی میخواد که همشون باهم نمایش داده بشن, و تحت هیچ شرایطی نباید اینجوری وقفه بینشون بیافته. من هم تا حد زیادی موافقم و برای جزییات موضوع باید منتظر بمونیم تا اگر SuspenseList به api ری‌اکت راه پیدا کرد, توی داکیومنتش چی می‌نویسن.
ولی چیزی که من تا الان متوجه شدم اینه که فرض کنید revealOrder ما forwards باشه و کامپوننت اول هم درحال نمایش داده شدنه. حالا اگه کامپوننت های ۲ تا ۹ بصورت همزمان دیتاشون حاضر بشه, ری‌اکت با این‌ها بصورت together رفتار میکنه چون همشون میتونن نمایش داده بشن.
حالا سنگین بودن رندر رو به قضیه اضافه کنیم می‌بینیم که کامپوننت ۲ تا ۵ رندرشون تموم می‌شه, نمایش داده می‌شن و کامپوننت‌های ۶ ببعد یکم بیشتر loading نشون میدن تا سری بعدی که فرصت رندر شدن پیدا کنن.

https://github.com/facebook/react/pull/15946

دیگر مقالات من: