خطایابی و رفع اشکال در کامپایلر React

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

چیزهایی که یاد می‌گیرید:

• تفاوت خطاهای زمان ساخت (Compiler Errors) و مشکلات زمان اجرا (Runtime Issues)

• الگوهای رایجی که باعث خرابی کامپایل می‌شوند

• گردش کار (Workflow) قدم‌به‌قدم برای خطایابی

درک رفتار کامپایلر

کامپایلر React بر این اساس طراحی شده که کدهای شما از قوانین اصلی راکت (Rules of React) پیروی می‌کنند. هر زمان که کامپایلر با کدی مواجه شود که احساس کند ممکن است این قوانین را نقض کرده باشد، به جای خراب کردن برنامه، به صورت کاملاً امن از بهینه‌سازی آن کامپوننت عبور می‌کند (Skip می‌کند).

تفاوت خطاهای کامپایلر و مشکلات زمان اجرا

• خطاهای کامپایلر (Compiler Errors): این خطاها در زمان ساخت پروژه (Build Time) رخ می‌دهند و مانع از خروجی گرفتن از کد می‌شوند. این اتفاق بسیار نادر است؛ چون کامپایلر معمولاً کدهای مشکوک را رد می‌کند، نه اینکه کل فرآیند ساخت را متوقف کند.

• مشکلات زمان اجرا (Runtime Issues): این مشکلات زمانی رخ می‌دهند که پروژه بدون خطا ساخته شده، اما در مرورگر رفتار عجیبی نشان می‌دهد. اکثر مشکلات کامپایلر از این نوع هستند. این اتفاق زمانی می‌افتد که کد شما قوانین راکت را به شکل خیلی ظریفی نقض کرده باشد (طوری که حتی ابزار ESLint هم متوجه آن نشده باشد) و کامپایلر به اشتباه فکر کرده کد شما سالم است و آن را بهینه‌سازی کرده است.

کلید خطایابی: هنگام بروز باگ در مرورگر، تمرکز خود را روی پیدا کردن نقض قوانین راکت در همان کامپوننت بگذارید، نه خراب بودن خود کامپایلر.

الگوهای رایج خرابکار (Common Breaking Patterns)

بزرگ‌ترین عاملی که باعث می‌شود کامپایلر برنامه شما را خراب کند این است که کد خود را به گونه‌ای نوشته باشید که برای درست کار کردن، به مموایز (امانتداری از رفرنس‌ها) وابسته باشد.

از آنجا که کامپایلر ممکن است حافظه پنهان (Cache) را به روشی متفاوت از هوک‌های دستی شما مدیریت کند، این وابستگی شدید به رفرنس‌ها می‌تواند منجر به رفتارهای غیرمنتظره مثل اجرای بی‌رویه افکت‌ها، حلقه‌های بی‌نهایت یا عدم به‌روزرسانی صفحه شود.

سناریوهای خطرناک:

• هوک‌های useEffect وابسته به رفرنس: زمانی که یک افکت به پایداری رفرنس یک شیء (Object) یا آرایه ([]) در رندرهای مختلف وابسته است.

• آرایه‌های وابستگی ناپایدار: مواردی که ناپایداری رفرنس‌ها باعث اجرای مکرر افکت‌ها یا ایجاد حلقه‌های بی‌نهایت (Infinite Loops) می‌شود.

• منطق‌های شرطی بر پایه رفرنس: زمانی که در شرط‌های خود، برابری دو شیء را بر اساس رفرنس مقایسه می‌کنید تا یک سیستم کش دست‌ساز بسازید.

مراحل قدم‌به‌قدم خطایابی (Debugging Workflow)

اگر با مشکلی مواجه شدید، مراحل زیر را دنبال کنید:

۱. برخورد با خطاهای زمان ساخت (Build Errors)

اگر در زمان npm run build با خطای ناگهانی کامپایلر مواجه شدید، احتمالاً یک باگ در خود کامپایلر پیدا کرده‌اید. این مورد را باید به گیت‌هاب رسمی راکت گزارش دهید.

۲. برخورد با مشکلات زمان اجرا (Runtime Issues)

گام اول: غیرفعال‌سازی موقت کامپوننت با قرار دادن دستور "use no memo" در بالاترین خط کامپوننت مشکوک، آن را از چرخه کامپایل خارج کنید:

function ProblematicComponent() {
  "use no memo"; // کامپایلر این کامپوننت را نادیده می‌گیرد
  
  // مابقی کدهای کامپوننت
}

اگر با این کار باگ برطرف شد، مطمئن می‌شویم که مشکل از نقض قوانین راکت در این کامپوننت است.

یک ترفند عالی: تمام هوک‌های بهینه‌سازی دستی (useMemo و useCallback و memo) را از آن کامپوننت پاک کنید و ببینید آیا کامپوننت بدون هیچ بهینه‌سازی درست کار می‌کند یا خیر. اگر بدون آن‌ها هم باگ داشت، یعنی قطعاً یکی از قوانین پایه‌ای راکت را زیر پا گذاشته‌اید.

گام دوم: اصلاح قدم‌به‌قدم

• ریشه مشکل (که معمولاً تکیه بر رفرنس‌هاست) را پیدا و اصلاح کنید.

• پس از هر تغییر کد را تست کنید.

• در نهایت دستور "use no memo" را پاک کنید.

• مطمئن شوید که کامپوننت دوباره نشان درخشان ✨ را در React DevTools دریافت می‌کند.

گزارش باگ به تیم React

اگر مطمئن شدید مشکل از کد شما نیست و یک باگ واقعی در کامپایلر پیدا کرده‌اید، یک Issue در گیت‌هاب ثبت کنید و موارد زیر را بفرستید:

1. نسخه دقیق React و کامپایلر.

2. یک کد نمونه بسیار کوچک که خطا را بازسازی کند (Minimal Reproduction).

3. تایید اینکه برنامه بدون کامپایلر کاملاً درست کار می‌کند.

4. رفتار مورد انتظار در مقایسه با رفتاری که در واقعیت رخ داده است.