یه نکته فرانتی خفن برای کسایی که خیلی از useMemo و React.memo استفاده میکنن

استفاده بی‌رویه از useMemo و React.memo بدون پروفایلینگ فقط هزینه‌ی نگهداری کد رو بالا می‌بره، چون ری‌رندر تو ری‌اکت صرفاً اجرا شدن مجدد تابع کامپوننت و ساخت ابجکت‌های جدید JSX هست و تا زمانی که فرآیند Commit و تغییرات فیزیکی DOM اتفاق نیفته، پردازش سنگینی محسوب نمیشه.

چرخه ری‌رندر کلاً سه تا تریگر داره: تغییر استیت داخلی، تغییر مقادیر context، یا دریافت ابجکت المنت جدید از والد؛ بنابراین تغییر Props به‌خودی‌خود تریگر نیست مگر اینکه کامپوننت با React.memo رپ شده باشه تا مقایسه سطحی یا Shallow Compare رو پراپس انجام بده.

برای حل مشکلات کارایی، بهینه‌سازی اول از اصلاح ساختار شروع میشه: پایین بردن محل قرارگیری استیت تا نزدیک‌ترین مصرف‌کننده و استفاده از الگوی ترکیب با children prop که باعث میشه ری‌اکت به دلیل یکسان بودن رفرنس ابجکت، کلاً فاز محاسبه زیردرخت رو Bypass کنه.

در نهایت اگه بعد از سنجش با ابزارهایی مثل Profiler یا React Scan محاسبه سنگینی دیدید، اونوقت تثبیت رفرنس با useMemo یا جداسازی با useDeferredValue معنا پیدا می‌کنه، چرا که حتی React Compiler هم فقط فرآیند ممیوایز کردن رفرنس‌های JSX رو خودکار می‌کنه و توانایی جابه‌جایی استیت یا اصلاح ساختار درخت کامپوننت رو نداره.

https://thetshaped.dev/p/react-rendering-demystified-your-usememo-probably-isnt-doing-anything

@codehalics | کدهالیک