1. چه تکنیکهایی میتوانید برای بهینهسازی عملکرد یک برنامه React استفاده کنید؟
تقسیمبندی کد با React.lazy و importهای پویا.
ذخیرهسازی با استفاده از React.memo، useMemo و useCallback برای جلوگیری از محاسبات و رندرهای غیرضروری.
مجازیسازی با react-window یا react-virtualized برای لیستهای بزرگ.
کاهش نرخ بهروزرسانی برای بهروزرسانیهای سنگین (مثل ورودیهای جستجو).
رندر انتخابی با استفاده از shouldComponentUpdate، React.PureComponent یا وابستگیهای درست در useEffect.
بهینهسازی تصاویر، بارگذاری تنبل داراییها و ارائه بستههای فشرده.
2. هدف از React.memo چیست و چه زمانی از آن استفاده میکنید؟
React.memo یک HOC است که جلوی رندرهای غیرضروری یک کامپوننت را میگیرد اگر props آن تغییر نکرده باشد.
مورد استفاده: کامپوننتهای تابعی که خالص هستند و props یکسانی را بارها دریافت میکنند.
بهخصوص در رندر لیستها یا کامپوننتهای تو در تو که والد آنها مرتب رندر میشود، مفید است.
3. هوکهای useCallback و useMemo چگونه کار میکنند و چگونه به عملکرد کمک میکنند؟
useCallback(fn, deps) یک نسخه ذخیرهشده از یک تابع برمیگرداند.
useMemo(fn, deps) یک نتیجه ذخیرهشده از یک محاسبه برمیگرداند.
چرا مهم است: از بازسازی غیرضروری توابع یا مقادیر جلوگیری میکند، که به جلوگیری از رندرهای مجدد یا محاسبات دوباره کمک میکند، بهویژه هنگام انتقال props به کامپوننتهای فرزند یا وابستگیها به useEffect.
4. تقسیمبندی کد در React چیست و چگونه میتوانید آن را با بارگذاری تنبل پیادهسازی کنید؟
تقسیمبندی کد برنامه شما را به تکههای کوچکتر تقسیم میکند که بر اساس نیاز بارگذاری میشوند، و زمان بارگذاری اولیه را بهبود میبخشد.
این کد Profile را فقط در صورت نیاز بارگذاری میکند. از React.lazy با Suspense برای تقسیمبندی کد در سطح مسیر یا کامپوننت استفاده کنید.
5. چگونه یک مشکل عملکردی ناشی از رندرهای بیش از حد در یک برنامه React را اشکالزدایی و رفع میکنید؟
مراحل:
فعال کردن React DevTools → رندرهای مجدد را مشخص کنید.
از تب Profiler برای پیدا کردن کامپوننتهایی که مرتب بهروزرسانی میشوند استفاده کنید.
وابستگیهای props/state را بررسی کنید و کامپوننتها را ذخیره کنید (React.memo) یا توابع را (useCallback).
مطمئن شوید useEffect و مصرفکنندگان context باعث بهروزرسانیهای غیرضروری نمیشوند.
از shouldComponentUpdate یا useMemo برای جلوگیری از رندرهای مجدد استفاده کنید.
6. چگونه Core Web Vitals (LCP، FID، CLS) را در یک برنامه React.js اندازهگیری و بهبود میدهید؟
اندازهگیری با استفاده از کتابخانه Web Vitals، Lighthouse یا ابزارهایی مثل PageSpeed Insights.
LCP: بهینهسازی تصاویر، رندر سمت سرور برای محتوای بالای صفحه.
FID: کاهش زمان مسدود شدن جاوااسکریپت، به تعویق انداختن جاوااسکریپت غیرضروری.
CLS: استفاده از ابعاد مناسب برای تصاویر/ویدئوها، جلوگیری از جابجایی طرحبندی.
7. زمانی را توصیف کنید که یک گلوگاه عملکردی را در یک برنامه فرانتاند شناسایی و رفع کردید.
در یک داشبورد سنگین دادهای، نمودارها با هر تغییر state به دلیل props جدید که هر بار منتقل میشد، دوباره رندر میشدند. من:
کامپوننتهای نمودار را در React.memo پیچیدم.
از useMemo برای محاسبه props استفاده کردم.
بهروزرسانیهای state را با useTransition دستهبندی کردم.
این کار زمان رندر را از حدود ۸۰۰ میلیثانیه به حدود ۱۰۰ میلیثانیه کاهش داد و تاخیر UI را برطرف کرد.
8. چگونه یک برنامه React که به دلیل حجم زیاد بسته از زمان بارگذاری اولیه کند رنج میبرد را بهینه میکنید؟
تقسیمبندی کد بر اساس مسیر و کامپوننت (React.lazy).
حذف کدهای استفادهنشده از کتابخانهها (مثلاً فقط توابع مورد نیاز از lodash وارد کنید).
از importهای پویا برای کامپوننتهای سنگین (مثل نمودارها، نقشهها) استفاده کنید.
به تعویق انداختن اسکریپتهای شخص ثالث مثل ابزارهای تحلیلی.
از تحلیلگر webpack برای بررسی حجم بسته و حذف موارد غیرضروری استفاده کنید.
9. چگونه یک برنامه React را برای شناسایی رندرهای غیرضروری یا نشت حافظه پروفایل میکنید؟
استفاده از React DevTools Profiler:
تعاملات را ضبط کنید.
به دنبال “چرا این رندر شد؟” با استفاده از قابلیتهای React 18 بگردید.
استفاده از Chrome DevTools → تب Memory:
به دنبال درختهای DOM جدا شده و اشیاء نگهداریشده بگردید.
افزودن لاگها یا console.count داخل کامپوننتها برای نظارت بر رندرهای مجدد.
10. متوجه نشت حافظه در یک برنامه React شدید. چگونه آن را شناسایی و رفع میکنید؟
شناسایی:
استفاده از Chrome DevTools → Memory → گرفتن اسنپشات.
جستجوی شنوندههای رویداد، تایمرها یا کلوژرهای نگهداریشده.
بررسی کامپوننتهای جدا شده که هنوز در حافظه هستند.
رفع:
پاکسازی اثرات جانبی در useEffect:
جلوگیری از نگهداری state در singletonهای جهانی یا کلوژرها.