استخدام lifecycles في react useeffect

هذه هي الطريقة التي يمكننا بها تنفيذ ما يعادل componentDidMount باستخدام الخطاف useEffect:

 useEffect(() => {
  // mount
});

لتنفيذ ما يكافئ componentDidUpdate باستخدام الخطاف useEffect ، يجب علينا القيام بذلك:

useEffect(() => {
  // mount and update
}, [dependency]);

تقريبًا نفس الشيء السابق ، لكن هذه المرة نقوم بتمرير مجموعة التبعيات الخاصة بنا كمعامل ثاني ، وداخل تلك المصفوفة ، يجب أن نمرر التبعية التي نريد مشاهدتها فاذا تغيرت تقوم useeffect بعمل تحديث للمكون

للقيام بالتنظيف بعد إلغاء تحميل المكون ، لدينا طريقة بسيطة لإجراء ما يعادل componentWillUnmount باستخدام الخطاف useEffect.

الشيء الوحيد الذي يتعين علينا القيام به هو إعادة callback في الخطاف useEffect ، مثل هذا:

useEffect(() => {
  window.addEventListener("mousemove", () => {});
  return () => {
    window.removeEventListener("mousemove", () => {})
  }
}, []);

الـ hook التي تسمى useEffect تحل محل كل الـ lifecycle methods المتعارف عليها.

بشكل طبيعي، ستقوم useEffect بالعمل بعد أول render + أيضاً أنها ستعمل بعد كل update.
طيب، ماذا لو أريد أن لا يحدث update بعد كل تغيير؟
ستجد أن useEffect تأخذ متغيرين. الأول هو دالة، والثاني هو مصفوفة تحتوي على بعض القيم.
لو كانت هذه المصفوفة فارغة "[]"، ستعمل useEffect مثل componentDidMount، أي أنها ستقوم بالعمل مرة واحدة في البداية.

لو كانت هذه المصفوفة غير موجودة أصلاً، ستعمل useEffect في كل update. مثل componentWillUpdate.
أما لو كانت المصفوفة بها قيم، لن تعمل useEffect حتى تتغير أي قيمة داخل هذه المصفوفة.
وبالنسبة إلى componentWillUnmount، عند إستخدام useEffect، لو كانت الدالة المعطاه لها return value كدالة أيضاً (callback)، ستقوم هذه الدالة بالعمل قبل أن يتم حذف الـ component.

إن 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 إن كان يساوي أحمد يضيف 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 في المثال السابق مستقل تماماً عن غيره، أليس هذا رائعاً أم ماذا؟!!!