تا حالا لیست بزرگی داخل React داشتی که اسکرولش لگ بزنه؟

احتمالاً برای شما هم پیش آمده که یک صفحه زمان زیادی برای لود شدن نیاز داشته باشد یا با لیست‌هایی سروکار داشته باشید که تعداد آیتم‌های آن‌ها زیاد است. در چنین شرایطی، معمولاً اولین تصمیم (حداقل در کوتاه‌مدت) این است که بهینه‌سازی را در سمت client انجام دهیم.

فرض کنید یک لیست با ۵۰۰ آیتم داریم. آیا از نظر فنی می‌توانیم همه‌ی ۵۰۰ آیتم را هم‌زمان داخل DOM رندر کنیم؟ بله، امکان‌پذیر است. اما اگر از زاویه‌ی performance به موضوع نگاه کنیم، بهترین انتخاب نیست.

مسئله‌ی اصلی اینجا این نیست که React توان انجام این کار را ندارد؛ مسئله‌ی این است که:
1. DOM بیش از حد بزرگ می‌شود
2. هزینه‌ی layout و paint به‌شدت افزایش پیدا می‌کند
3. تعامل کاربر (scroll، click، input) کند و ناپایدار می‌شود

در این نقطه معمولاً راه‌حل‌هایی مثل Virtual Scroll / List Virtualization مطرح می‌شوند؛ راه‌حلی که به‌جای رندر همه‌ی آیتم‌ها، فقط المنت‌های داخل viewport را وارد DOM می‌کند. در چنین سناریوهایی، Virtual Scroll یکی از موثرترین راه‌حل‌هاست. ایده‌ی Virtual Scroll ساده است:
همه‌ی داده‌ها وجود دارند, اما همه‌ی آن‌ها هم‌زمان داخل DOM نیستند.

به‌جای رندر ۵۰۰ آیتم، فقط آیتم‌هایی که در viewport دیده می‌شوند (به‌همراه مقدار کمی قبل و بعد از آن) وارد DOM می‌شوند. با اسکرول کاربر، المنت‌های قدیمی حذف و المنت‌های جدید جایگزین می‌شوند.

اگر شما راه‌حل بهتری برای این سناریو دارید، حتماً برام بنویسید
منبع خوب برای آشنایی بیشتر با Virtual Scrolling:
https://medium.com/@sreekanthsreekanth970/virtual-scrolling-2797d722c6e2

@DevTwitter | <Mohammad Khaleghi/>