مجموعه پرامپت هوش مصنوعی برای دیباگ و بهینه‌سازی ری‌اکت

پیدا کردن باگ‌های لجیک و افت رندرینگ در پروژه‌های بزرگ ری‌اکت (React) گاهی ساعت‌ها وقت برنامه‌نویس را می‌گیرد؛ به‌ویژه زمانی که کامپوننت‌ها پیچیده شده و وابستگی‌های هوک‌ها دچار مشکل می‌شوند. اگر به جای جستجوی طولانی در انجمن‌های برنامه‌نویسی، مدل زبانی هوش مصنوعی را به یک همکار ارشد (Senior Dev) باسابقه تبدیل کنید، روند عیب‌یابی و پاکسازی کدها به شکل چشمگیری سریع‌تر خواهد شد. برای مدیریت بهتر ابزارها و پکیج‌های پروژه خود، می‌توانید در کنار بهینه‌سازی کدها از ابزارهای کمکی مانند مدیریت بسته‌های جاوااسکریپت با pnpm؛ سریع‌تر و بهینه‌تر از npm نیز استفاده کنید تا سرعت توسعه فرانت‌اند شما تکمیل شود. در ادامه مجموعه‌ای از پرامپت‌های کاربردی و مهندسی‌شده را بررسی می‌کنیم که کدهای شما را از خطاهای پنهان نجات می‌دهند.

اصول ورود صحیح کد و لاگ به هوش مصنوعی

قبل از استفاده از پرامپت‌ها، باید بدانید چطور اطلاعات را به هوش مصنوعی بدهید تا دقیق‌ترین پاسخ را بگیرید. هرگز کل سورس‌کد یک فایل پانصد خطی را بدون توضیح رها نکنید. بهترین روش این است که ابتدا زمینه پروژه (مانند استفاده از تایپ‌اسکریپت، ری‌اکت هوک‌ها یا ابزارهای مدیریت استیت) را مشخص کنید، سپس قطعه کد مسئله‌دار را به همراه پیام خطای کنسول (Console Error) یا رفتار ناخواسته UI در بلوک مشخص قرار دهید. این کار باعث می‌شود مدل زبانی دقیقاً روی نقطه کور کد شما تمرکز کند و راه حل عمومی ندهد.

پرامپت اول: تحلیل ساختار کامپوننت و شناسایی کدهای ضدالگو (Anti-patterns)

این پرامپت برای زمانی است که یک کامپوننت بزرگ دارید که حس می‌کنید بیش از حد شلوغ شده، منطق بیزینس با ظاهر صفحه قاطی شده یا از الگوهای منسوخ‌شده در آن استفاده شده است. این دستور مدل زبانی را وادار می‌کند ساختار را مثل یک کدreviewکننده سخت‌گیر بررسی کند.

تو یک توسعه‌دهنده ارشد فرانت‌اند و متخصص ری‌اکت هستی. من کدهای یک کامپوننت را به همراه توضیحات عملکرد آن برایت می‌فرستم. وظیفه تو این است که مثل یک کدreviewکننده دقیق عمل کنی. کدهای زیر را از نظر موارد زیر تحلیل کن:
۱. شناسایی ضدالگوها (Anti-patterns) و کدهایی که نقض اصول تمیزنویسی هستند.
۲. مشکلات مربوط به مدیریت استیت (State Management) و وابستگی‌های نادرست هوک‌ها.
۳. پیشنهاد ساختاردهی مجدد (Refactoring) برای کوچک‌تر و قابل‌استفاده مجدد کردن کامپوننت.

این کد کامپوننت من:
[کد کامپوننت یا فایل خود را اینجا وارد کنید]

لطفاً پاسخ را در سه بخش مجزا شامل: «ایرادات حیاتی»، «پیشنهادهای بهینه‌سازی ساختار» و «نسخه‌ی بازنویسی‌شده و تمیز کد» ارائه بده. خروجی باید با کامنت‌های فارسی و توضیحات کوتاه همراه باشد.

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

نمونه خروجی و روش شخصی‌سازی: مدل در پاسخ، کدهایی که استیت‌های تکراری دارند را شناسایی کرده و پیشنهاد می‌دهد بخش‌هایی از منطق را به Custom Hooks منتقل کنید. می‌توانید در بخش توضیحات پرامپت اضافه کنید که پروژه شما از تایپ‌اسکریپت استفاده می‌کند تا خروجی دقیقاً منطبق بر تایپ‌های شما باشد.

پرامپت دوم: تست سرعت، رندرهای اضافی و جلوگیری از افت فریم

رندرهای غیرضروری (Unnecessary Renders) یکی از اصلی‌ترین دلایل کندی برنامه‌های ری‌اکت در صفحات شلوغ هستند. این پرامپت کمک می‌کند تا نقاطی که باعث اجرای دوباره و بی‌مورد کامپوننت‌ها می‌شوند را شناسایی کرده و از ابزارهایی مثل useMemo و useCallback بهینه‌سازی‌شده استفاده کنید.

تو یک متخصص بهینه‌سازی عملکرد (Performance Optimization) در ری‌اکت هستی. من کدهای کامپوننت والد و فرزند را به همراه نحوه پاس دادن پراپ‌ها (Props) برایت ارسال می‌کنم. بررسی کن که کجاها رندرهای اضافی رخ می‌دهد و ریشه آن چیست.

کد مربوطه:
[کدهای مرتبط را اینجا قرار دهید]

لطفاً موارد زیر را مشخص کن:
۱. کدام بخش‌ها مستعد رندر مجدد غیرضروری هستند و دلیل دقیق آن چیست؟
۲. دقیقاً کجاها باید از هوک‌های یادآوری مثل useMemo یا useCallback استفاده کنم و آیا استفاده از آن‌ها در اینجا واقعاً لازم است یا باعث سربار (Overhead) می‌شود؟
۳. نسخه اصلاح‌شده کد را با اعمال بهینه‌سازی‌های عملکردی بنویس.

چرا این پرامپت کار می‌کند: بسیاری از توسعه‌دهندگان به محض دیدن کندی، از useMemo در همه جا استفاده می‌کنند که خود باعث افت سرعت می‌شود. این پرامپت به هوش مصنوعی دستور می‌دهد که سربار حافظه را هم بسنجد و فقط در صورت نیاز واقعی، بهینه‌سازی را پیشنهاد دهد.

نکته پنهان و اشتباه رایج: مراقب باشید که کدهای حاوی توابع بسیار سنگین یا اتصال به دیتابیس‌های ابریِ اختصاصی را بدون بررسی امنیتی به ابزارهای هوش مصنوعی آنلاین نفرستید؛ همیشه کلیدهای دسترسی (API Keys) و اطلاعات محرمانه را پیش از ارسال از کد حذف کنید.

پرامپت سوم: بازنویسی و دیباگ کدهای ناهمگام (Async) و مدیریت خطا

مدیریت درخواست‌های شبکه (API Calls)، وضعیت‌های بارگذاری (Loading States) و خطاهای احتمالی در جاوااسکریپت و ری‌اکت اگر اصولی پیاده نشوند، منجر به خطاهای خاکستری و کرش ناخواسته برنامه می‌شوند. پرامپت زیر برای اصلاح کدهای ناهمگام طراحی شده است.

تو یک مهندس ارشد نرم‌افزار مسلط به مدیریت عملیات ناهمگام (Async/Await) در ری‌اکت هستی. کدهای زیر مربوط به یک عملیات واکشی داده (Data Fetching) یا اتصال به سرور است که گاهی با خطای مدیریت نشده یا فریز شدن رابط کاربری مواجه می‌شود.

کد ناهمگام من:
[کد بخش مربوط به درخواست‌های API یا لودینگ را اینجا وارد کنید]

لطفاً این موارد را بررسی و اصلاح کن:
۱. خطاهای احتمالی مدیریت نشده (Unhandled Rejections) را پیدا کن.
۲. نحوه‌ی مدیریت حالت‌های لودینگ، خطا و داده موفق (Loading, Error, Success States) را استانداردسازی کن.
۳. الگوی تمیز برای لغو درخواست‌ها (AbortController) در صورت ترک کامپوننت توسط کاربر را به کد اضافه کن.
۴. نسخه نهایی کد را همراه با بلوک‌های try...catch ایمن بنویس.

توضیح بخش‌به‌بخش و خروجی: این پرامپت به شما کدی تحویل می‌دهد که نه تنها خطاهای سرور را به زیبایی در UI هندل می‌کند، بلکه از خطای رایج نشت حافظه (Memory Leak) هنگام بستن سریع کامپوننت در حین بارگذاری داده جلوگیری می‌کند؛ چون از AbortController در خروجی استفاده خواهد کرد.

پرسش‌های متداول

جمع‌بندی

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