کتابچه کارایی React

کارایی در React با اندازه‌گیری شروع می‌شود نه با useMemo تصادفی. این راهنما یک حلقه ساده برای نگه داشتن اپ سریع پیشنهاد می‌کند.

۱) اول بودجه بگذارید

• هدف INP/TTI روی موبایل (مثلاً INP زیر ۲۰۰ میلی‌ثانیه).
• سقف باندل هر روت (مثلاً ۲۰۰ کیلوبایت gzip).
• سقف کار هیدریشن با محدود کردن عمق و حجم پراپ‌ها.

۲) جایی که کاربر حس می‌کند اندازه بگیرید

• Core Web Vitals را در پروداکشن با web-vitals یا RUM جمع کنید.
• برای رویدادهای سنگین performance.mark/measure بگذارید.
• شمارش رندر کامپوننت‌ها در توسعه با React Profiler یا why-did-you-render.

۳) کم کردن جاوااسکریپت

• کداسپلیت بر اساس روت و فیچر؛ import() برای صفحات کم‌مصرف.
• ایمپورت درختی: ESM و ایمپورت نامی؛ از barrel هایی که کل لایبرری را می‌آورند دوری کنید.
• محاسبات تکراری را به سرور یا useMemo نزدیک مرز داده منتقل کنید.

۴) کنترل رندر

• React.memo برای لیست‌های برگ، useCallback وقتی پراپ‌ها پایدارند.
• کلید پایدار برای لیست‌ها تا unmount/remount رخ ندهد.
• Virtualization برای لیست‌های بالای ۲۰۰ آیتم (react-window).
• چند setState پشت سر هم را در یک آپدیت ادغام کنید.

نمونه ویرچوال‌سازی

import { FixedSizeList as List } from "react-window";

export function Items({ rows }) {
  return (
    <List height={420} itemCount={rows.length} itemSize={52} width="100%">
      {({ index, style }) => (
        <Row key={rows[index].id} style={style} data={rows[index]} />
      )}
    </List>
  );
}

۵) هیدریشن و سرور

• در فریم‌ورک‌های React 18 از Server Components برای فچ و محاسبه سنگین استفاده کنید.
• HTML را با Suspense استریم کنید تا محتوای بالای صفحه زودتر بیاید.
• کامپوننت‌های کلاینت را کوچک نگه دارید؛ آبجکت‌های بزرگ را به پراپ پاس ندهید.

۶) شبکه و async

• Cache استراتژیک: SWR/React Query با stale-while-revalidate.
• درخواست حیاتی را جلو بیندازید و با AbortController لغو کنید.
• UI خوشبینانه با roll back در صورت خطا.

۷) تصویر و دارایی

• سورس واکنش‌گرا (srcset/picture)، فرمت مدرن (AVIF/WebP)، CDN.
• Lazy load برای پایین صفحه با loading="lazy" و IntersectionObserver.
• آیکون‌های سنگین را به SVG sprite یا Icon font تبدیل کنید.

۸) حلقه پروفایل

1. مسیر کند را در Profiler بازتولید کنید.
2. فلیم‌گراف بگیرید و روی کامپوننت و تعامل برچسب بزنید.
3. یک تغییر اعمال کنید و همان تعامل را دوباره اندازه بگیرید.
4. با تست یا lint (بودجه باندل) نگهبان بگذارید.

چک‌لیست قبل از مرج

• باندل هر روت زیر بودجه و قابل کش شدن است.
• روی تعاملات کلیدی رندر اضافه نداریم.
• لیست‌های بزرگ ویرچوال یا صفحه‌بندی شده‌اند.
• تسک‌های بالای ۵۰ میلی‌ثانیه تقسیم یا به idle منتقل شده‌اند.
• مانیتور Core Web Vitals در پروداکشن فعال است.

نتیجه: اندازه بگیرید، بودجه تعیین کنید و رندر را قابل پیش‌بینی نگه دارید تا سرعت با بزرگ شدن کد حفظ شود.