لماذا يتم تنفيذ الكود مرتين في رياكت

لا أجد أن الكود الذي لديك به مشكلة ما، يفترض أن يتم طباعة الجمل مرة واحدة ما لم يكن هنالك تأثير من خلال كود آخر.

يجب الإشارة أن خطاف useEffect يستقبل كمعامل ثان سلسلة متغيرات يتم تنفيذه كل مرة تتغير قيمة هاته المتغيرات، في مثل الحالة التي هو المعامل والمتغير name، فكل مرة يتم تصيير قيمة جديدة لـ name يتم إعادة تنفيذ الكود والنتيجة: طباعة الجملة مرتين.

أما في الحالة الأولى، فالذي يتم تمريره هو سلسلة متغيرات فارغة، بمعنى أنه لن يتم تنفيذ الكود إلا مرة واحدة وهي خلال التصيير الابتدائي initial render. 

قد لا يمكن تحديد السبب بدقة، ولكن انظر ما ان كنت تقوم بتحديث قيمة name بمكان ما بالشيفرة التي لديك.

تقصد في المرة الأولى عند فتح التطبيق بدون أي تحديث للحالة state أو الإعتماديات الخاصة بالخطاف useEffect؟

في حال كان الأمر كذلك، فهو بسبب وضع StrictMode وما يفعله هو 3 أشياء أثناء تطوير المشروع:

1. يعيد عرض مكوناتك مرة أخرى Re-renders للعثور على الأخطاء الناتجة عن إعادة العرض غير النقي (التأثيرات الجانبية).
2. يعيد تشغيل تأثيرات مكوناتك مرة أخرى للعثور على الأخطاء الناجمة عن عدم وجود دالة تنظيف مناسبة.
3. يتحقق من مكوناتك مما إذا كان يتم استخدام واجهات برمجة التطبيقات القديمة deprecated APIs.

وبالتالي يتم طباعة الرسالة مرتين في الكونسول، ومن المفترض أن تجد ذلك الوضوع مفعل في مشروعك في ملف index.js أو app.js كالتالي:

const root = ReactDOM.createRoot(
  document.getElementById('root'),
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

وفي حال تعطيله قم بإزالة StrictMode ليصبح الكود كالتالي:

const root = ReactDOM.createRoot(
  document.getElementById('root'),
);

root.render(
  <App />,
);