ری اکت ممو چیست؟ چگونه عملکرد ری اکت را بهبود بخشیم؟

React.memo چیست؟

- تکنیک memoization در برنامه‌نویسی برای ذخیره نتایج و جلوگیری از محاسبات تکراری استفاده می‌شود.

- در ری اکت، React.memo باعث می‌شود یک کامپوننت فقط زمانی دوباره رندر شود که props آن تغییر کرده باشد.

⚙️ نحوه کار React.memo

- به‌طور پیش‌فرض، تغییر state در والد باعث رندر مجدد همه فرزندان می‌شود.

- با React.memo، مقایسه سطحی (shallow comparison) روی props انجام می‌شود و اگر تغییری نبود، رندر مجدد حذف می‌شود.

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

✅ مزایا

- جلوگیری از رندرهای غیرضروری

- بهبود عملکرد در کامپوننت‌های سنگین یا لیست‌های بزرگ

- بهینه‌سازی تجربه کاربری

🧩 موارد استفاده مناسب

- تغییرات مکرر props در والد ولی خروجی ثابت در فرزند

- کامپوننت‌های دارای محاسبات سنگین

- لیست‌های بزرگ با داده‌های پویا

- کامپوننت‌های تابعی خالص (pure function components)

⚠️ مواردی که استفاده از React.memo سودی ندارد

- اگر props همیشه تغییر کنند، مقایسه انجام می‌شود ولی رندر همچنان اتفاق می‌افتد → سربار اضافی بدون سود.

- بهتر است قبل از استفاده، با ابزار React Profiler بررسی کنید که آیا واقعاً بهینه‌سازی لازم است یا خیر.

🔧 ابزارهای مرتبط

- useMemo: برای ذخیره نتایج محاسبات سنگین.

- useCallback: برای ذخیره مرجع توابع و جلوگیری از ساخت مجدد آن‌ها.

⏱️ اهمیت عملکرد

- طبق Doherty Threshold، پاسخ کمتر از 400ms باعث حفظ توجه کاربر می‌شود.

- در پروژه‌های بزرگ باید از ابتدا بهینه‌سازی‌هایی مثل memoization، pagination و lazy loading در نظر گرفته شوند.