كيفية تشغيل الشيفرة باستخدام React useEffect مرة واحدة فقط

يمكنك تشغيل الشيفرة مرة واحدة باستخدام useeffect بهذه الطريقة 

import React from 'react'

export default function MyComponent() {
useEffect(() => {
   // الشيفرة
}, []) // أبقي قائمة المعايير هنا فارغة 

    return (
        <div>
            ....
        </div>
    )
}

و للاطلاع أكثر على كيفية استخدام useeffect يمكنك الرجوع الى هذا السؤال ومراجعة الاجابات هناك 

https://academy.hsoub.com/questions/13679-استخدام-lifecycles-في-react-useeffect

إن useEffect تدمج الـlifecycle methods الثلاثة في تابع واحد، useEffect تستعمل حين تريد تنفيذ كود معين عند كل تغير لمتحولات معينة، فمثلاً الكود التالي:

useEffect(() => { console.log(name); },[name])

سيطبع name كلما تغير، قد يكون name هذا prop من أب وقد يكون state ، لا يهم كيف يتغير كل ما يهم أنه كلما تغير سنقوم بطباعته، طبعاً الكود بداخل useEffect ينفذ مرة واحدة على اﻷقل ولذا يمكن استعماله بديلاً عن componentDidMount هكذا:

useEffect(() => { 
  // do something 
},[]);

لاحظ المصفوفة الفارغة، تلك طريقة نخبر فيها useEffect أن الكود لا يعتمد على أية متحولات لذا ينفذ مرة واحدة عند كل mount للـcomponent.

طبعاً يمكننا تمرير عدة متحولات داخل المصفوفة مثل اﻵتي:

useEffect(() => { console.log(a+b); },[a,b]);

الكود السابق يطبع مجموع a وb كلما تغير a أو تغير b.أخيراً يمكن للتابع الممرر كـcallback للـuseEffect أن يرد ما يسمى cleanup function ، كما في المثال التالي:

useEffect(() => { 
  if(name === 'ahmad'){ 
    window.addEventListener('mousemove',mousemovelistener);
    return () => { 
      window.removeEventListener('mousemove',mousemovelistener); 
    }  
  } 
},[name]);

الكود السابق يفحص name إن كان يساوي ahmad يضيف listener للحدث mousemove ، عندما يتغير name إلى قيمة مثل "a" نريد للـmousemovelistener أن يزال لذلك كتبنا الكود التالي:

return () => { 
  window.removeEventListener('mousemove',mousemovelistener); 
}

عندما ترد تابعاً هكذا يفهم useEffect أن عليه تنفيذ هذا التابع أولاً ثم نغير dependency (والتي في المثال السابق هي name) ثم ننفذ الكود داخل useEffect من جديد.

أعتقد أنك قد لاحظت أن useEffect أفضل وأقوى من lifecycle methods ، ليس ذلك فقط بل يمكنك كتابة عدة useEffect في component هكذا:

useEffect(() => { 
  console.log(name); 
},[name]); 
useEffect(() => { 
  console.log(a+b); 
},[a,b]);

كل effect في المثال السابق مستقل تماماً عن غيره، أليس هذا رائعاً؟!!!