ری‌اکت کامپایلر:
پایان دوران useMemo و useCallback دستی

اگه تا حالا با ری‌اکت کار کردی، حتماً درگیر بهینه‌سازی رندرهای اضافه با useMemo، useCallback و React.memo شدی. این کار هم وقت‌گیره هم جای خطا داره؛ یه دیپندنسی رو جا بندازی، کل بهینه‌سازی بی‌اثر می‌شه.

دقیقا React Compiler همین مشکل رو حل می‌کنه. این کامپایلر در زمان build، کد کامپوننت‌ها و هوک‌های شما رو آنالیز می‌کنه و به‌صورت خودکار memoization لازم رو اضافه می‌کنه؛ بدون اینکه شما دستی چیزی بنویسید. تیم ری‌اکت این پروژه رو مدت‌ها به‌صورت تجربی روی خود facebook.com تست کرد و حالا با انتشار نسخه پایدار ۱.۰، برای پروژه‌های production آماده‌ست.

نکته مهم: کامپایلر فقط زمانی درست کار می‌کنه که کد شما از Rules of React پیروی کنه (مثلاً موقع رندر، state یا props رو mutate نکنید). برای همین eslint-plugin-react-hooks هم قوانین مخصوص کامپایلر رو داره تا قبل از build مشکلات رو نشونتون بده.

نصبش در Next.js خیلی ساده‌ست:

// next.config.js
module.exports = {
  reactCompiler: true,
}

برای پروژه‌های Vite یا هر ابزار دیگه‌ای هم کافیه پکیج زیر رو نصب کنید و به کانفیگ Babel اضافه کنید:

npm install babel-plugin-react-compiler

بعد از فعال‌سازی، دیگه لازم نیست نگران رندرهای اضافه‌ی کامپوننت‌های فرزند باشید؛ کامپایلر خودش تشخیص می‌ده کجا نیاز به memoization هست.

#برنامه_نویسی #ری‌اکت #فرانت_اند #React #WebDev


کانال آموزشی کدنایت | آموزش برنامه نویسی

🆔 @codenight_ir