اجرا شدن تکراری و دوبار صفحه و useEffect در react js
اگر در حال توسعهی یک برنامه با react js هستید و در آن از useEffectها استفاده میکنید اگر کمی عمیقتر شوید میبینید که useEffectهایی که مقدار state آنها [] است، دوبار اجرا میشوند در این نوشته به روش رفع آن میپردازیم.
اجرا شدن تکراری و دوبار صفحه و useEffect در react js
برای رفع این مشکل وارد فایل index.js یا app.js خود شوید و تگ React.StrictMode را حذف کنید و تگ App را خالی استفاده کنید. این مورد تنها در زمان development رخ میدهد.
اگر نیاز به آموزشهای بیشتری در ارتباط با react js دارید در بخش نظرات همین نوشته برای ما بنویسید.
برای امتیاز به این نوشته کلیک کنید!
[کل: 3 میانگین: 3.7]



















اگر از console.log برای تست استفاده کنیم، دوباره همه چیز رو بهم نمیریزه؟
اگر از console.log استفاده کنید، همچنان اجرای دوبار را در کنسول مشاهده خواهید کرد، اما این موضوع در زمان production دیگر رخ نمیدهد.
استفاده از cleanup function تو useEffect تاثیری داره روی این دوبار اجرا؟
خیر، cleanup function تاثیری روی دوبار اجرا شدن useEffect در حالت Strict Mode ندارد، بلکه برای جلوگیری از نشت حافظه و پاکسازی منابع استفاده میشود.
این مشکل روی همه نسخههای React هست یا فقط جدیدا؟
این رفتار در نسخههای جدیدتر React به صورت پیشفرض برای کمک به شناسایی مشکلات احتمالی در زمان توسعه فعال است.
وقتی useEffect دوبار اجرا میشه، ممکنه state هم دوبار تغییر کنه؟
بله، اگر useEffect دو بار اجرا شود، ممکن است باعث تغییرات تکراری در state نیز شود.
این روش حذف React.StrictMode روی کل پروژه اثر منفی نمیذاره؟
سلام، حذف React.StrictMode فقط در محیط توسعه (development) باعث اجرای دوبار useEffect میشود و در نسخه نهایی پروژه تأثیری ندارد.