چرا اپلیکیشن React من با ۵,۰۰۰ رکورد کند شد

من یک قابلیت در React ساختم که شامل یک dropdown قابل جستجو و یک جدول داده بود.

همه چیز در طول توسعه به خوبی کار می‌کرد. سپس داده‌های واقعی تولید (production) را بارگذاری کردم. اپلیکیشن کند شد.

باز شدن dropdown چند ثانیه طول می‌کشید. تایپ کردن در جعبه جستجو با لگ (lag) همراه بود. اپلیکیشن حافظه بسیار زیادی مصرف می‌کرد.

من باید ۵,۰۰۰ رکورد کاربر را مدیریت می‌کردم. به جستجوی آنی و اسکرول روان نیاز داشتم.

در اینجا نحوه رفع این مشکل را توضیح می‌دهم.

  1. استفاده از useMemo برای محاسبات من فیلتر کردن داده‌ها را در هر بار رندر (render) متوقف کردم. از useMemo برای ذخیره لیست فیلتر شده استفاده کردم. این کار از انجام کارهای غیرضروری توسط CPU جلوگیری می‌کند.

  2. اضافه کردن Debouncing قبلاً با هر کلید زده شده، یک جستجو اجرا می‌شد. این کار برای لیست‌های بزرگ هزینه‌بر است. من یک debounce ۳۰۰ میلی‌ثانیه‌ای اضافه کردم. حالا اپلیکیشن تنها زمانی جستجو می‌کند که کاربر تایپ کردن را متوقف کند.

  3. پیاده‌سازی Virtualization این بزرگترین راه حل بود. به جای رندر کردن ۵,۰۰۰ المان DOM، از react-window استفاده کردم. اکنون مرورگر فقط ۲۰ یا ۳۰ ردیفی را که در صفحه قابل مشاهده هستند رندر می‌کند. این کار باعث روان شدن اسکرول و کاهش مصرف حافظه می‌شود.

  4. جلوگیری از Re-renders من از React.memo روی کامپوننت‌های ردیف استفاده کردم. همچنین از useCallback برای هندلرهای رویداد (event handlers) استفاده کردم. این کار باعث می‌شود کامپوننت‌های فرزند در صورتی که داده‌هایشان تغییر نکرده، آپدیت نشوند.

  5. استفاده از Server-side Pagination من دریافت همزمان تمام کاربران را متوقف کردم. به دریافت صفحات کوچک ۵۰ رکوردی تغییر وضعیت دادم. این کار منجر به پاسخ‌های سریع‌تر API و حجم داده‌های (payload) کمتر می‌شود.

  6. بهینه‌سازی Material UI قابلیت Autocomplete در MUI عالی است، اما با لیست‌های بسیار بزرگ مشکل دارد. من گزینه‌های نمایش داده شده را به ۱۰۰ نتیجه اول محدود کردم تا سرعت حفظ شود.

نتایج:

• سرعت dropdown: از ۵ ثانیه به زیر ۵۰۰ میلی‌ثانیه. • پاسخ جستجو: از حالت لگ‌دار به آنی. • مصرف حافظه: کاهش چشمگیر.

مشکلات عملکردی اغلب در طول توسعه پنهان می‌مانند. آن‌ها زمانی ظاهر می‌شوند که داده‌های واقعی به کاربران شما می‌رسد.

ابتدا گلوگاه‌های (bottlenecks) خود را اندازه‌گیری کنید. بزرگترین آن‌ها را با استفاده از memoization، virtualization و debouncing رفع کنید.

کدام بهینه‌سازی بیشترین کمک را به اپلیکیشن‌های React شما کرده است؟ در کامنت‌ها به من بگویید.

منبع: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9