إستعمالات React useEffect Hook و طريقة تجنب ل memory leak

React هو library خاصة ب javascript لإنشاء واجهات المستخدم user interfaces. بإستخدام react بإمكانك تنشأ العديد من ل components مستقلين بداتهم, و كاتجمعهم مع بعضياتهم باش تنشأ واجهات متكاملة.

إمكليك تنشأ ل components بطريقتين, إما بإستخدام class أو function . الطريقة المحببة بزاف هي إستخدام ل function لأنها بسيطة و كاتعطيك الحرية فالعمل بالإضافة لأن العديد من المقالات و الفيديوهات اللي كايشرحو React كايستخدمو ل function components في الشرح.

إبتداءا من الإصدار 16.8, React ضاف ل Hooks. اللي هوما مجرد functions مبنيين في React كايمكنوك من أنك تتبع التغيرات ديال state و تنفد أوامر طبقا لدوك التغيرات. بالإضافة لانه بإمكانك تقاد Hooks خاصين بيك.

فهاد المقال غانتعرفو على وحدة من أكثر ل Hooks إستخداما, اللي هي useEffect, غانتعرفو على الإستخدامات ديالها بالإضافة لكيفاش تجنب Memory leak اللي هو أخطر حاجة تقدر توقع ليك لانه كايسبب مشاكل و خلل فالعمل اللي مكايبانوش فالحين.

شرح useEffect Hook :

كل component هو مجرد function كاتعطينا شي حاجة كاتبان للمستخدم, مثلا زر او قائمة... . هاد ل component تقدر تبان او تختفي او إتغير الشكل ديالها طبقا لعدة أشياء, منها :

1- الحالة ديال داك ل component اي state : مثلا عندنا component اللي هو عبارة عن زر لتسجيل الدخول, كان باين, لان الحالة ديال التطبيق او الموقع كاتقول انك ما سجلتيش الدخول. لكن ملي غاتسجل الدخول, داك الزر غايختافي حيت الحالة تبدلات.

2- ل props اللي هوما قيم كانعطيوهم ل component, بإمكانك تعتابرهم بحال ل function arguments. كمثال عندنا component اللي عبارة عن زر ولكن بغينا نستخدموه في أماكن مختلفة, فكل مرة كانستخدموه كانعطيوه ك props داك text اللي بغيناه يضهر عليه.

3- التأثيرات الجانبية side effects اللي هوما أوامر كانكتبوهوم حنا كمثال تغيير state او إتصال ب API او حفض شيء ما في Local storage.

علاش كانستخدمو side effects ؟

بإمكانا نستعملو side effects باش نغيرو الشكل ديال الصفحة او نديرو اشياء اللي ما غاتأترش على الصفحة.

هاد side effects كانديروه بمساعدة useEffect. useEffect كاتقبل شيئين, اللي هوما:

1- ل function او ل callback اللي بغيناها تتنفد. إلزامي

2- array فيها الاشياء اللي بغينا نراقبوها و نفدو ل callback ملي تتغير. إختياري

useEffect(callback, [المتغيرات]);

إستخدامات useEffect hook :

ديك ل callback اللي عطينا ل useEffect هي اللي غاتنفد دوك side effects.

1- useEffect كاتخدم فالبداية initial render.

React كايقوم بتشغيل useEffect تلقائيا فأول ضهور initial render لداك ل component فالصفحة. يعني بإمكانا نفدو side effect في أول مرة كايضهر داك ل component فالصفحة.

useEffect(() => {
  // Side Effect
},[]);

إلى بغينا useEffect تخدم فقط في ل initial render, كانعطيوها ل callback بالإضافة ل array خاويا.

2- في كل Rerender.

فكل مرة state كاتغير React كايقوم ب rerender اي بإعادة إضهار ل component من جديد باش إبانو التغيرات. إلى بغينا useEffect تخدم فكل Rerender كانعطيوها فقط ل callback.

useEffect(() => {
  // Side Effect
});

3- حسب تغير قيمة state او ل props :

بإمكانا نشغلو useEffect فكل مرة كاتغير القيمة ديال state او ل props .

useEffect(() => {
  // Side Effect
}, [state]);

useEffect(() => {
  // Side Effect
}, [props]);

بكل بساطة في ل array كانوضعو المتغير اللي بغينا useEffect تراقبو و تشتغل فكل مرة كاتغير القيمة ديالو.

كمثال باش توضح الصورة, غاراقبو state ديال theme اللي ختارو ل user اي Dark theme أو Light theme و فكل مرة كايتغير theme غانقومو بالحفض ديال القيمة ف localStorage باش واخا ل user يغلق الصفحة غانقدرو نحتافضو بالإختيار ديالو, ل code غايكون على الشكل التالي:

useEffect(()=>{
localStorage.setItem('isDark', isDark);
}, [isDark])

4- حسب تغير قيمة عدة متغيرات.

بإمكان useEffect تراقب اكثر من متغير.

useEffect(() => {
  // Side Effect
}, [props, state]);

فهاد الحالة كانكونو باغيين نراقبو أكثر من متغير و نفدو نفس side effect إلى تغيرات القيمة ديال شي واحد فيهم.

ماهو useEffect Cleanup ؟

ل cleanup هو انك تلغي العمل ديال داك side effect ملي ل component إتحيد من الصفحة, لأن اي side Effect خاصو إبقا منحاصر في ل component فين تفعل.

ماهو ل Memory leak ؟

إلى ما درتيش ل cleanup ل useEffect, داك side Effect اللي عطيتيه ليها غايبقا خدام وخا داك ل component إتحيد من الصفحة. أبسط مثال على هادشي هو setTimeout, نفتارضو انك بغيتي تستعمل setTimeout باش تنفد شي code من بعد واحد المدة زمنية, لكن ل component تحيد قبل ديك المدة الزمنية, هادشي مكايعنيش ان حتى ديك setTimeout غاتحيد, بل غاتبقا خدامة او هادشي غايأدي لأن داك side effect غايخدم فغير محلو و طبعا غايسبب فمشاكل. هذا هو المعنى ديال memory leak. بتفسير أخر بسيط, Memory leak هو أن التأثير ديال side Effect مكايبقاش منحاصر على ل component اللي تفعل فيه, بل التأثير كايقيس components اخرين.

هادا هو ل Warning اللي كايعطيك React ملي كايكتاشف Memory leak 👇

كيفاش نديرو Cleanup ؟

الأمر بسيط جدا. كل ما عليك هو انك تعطي في return ديال useEffect واحد ل Function اللي كاتقوم بإلغاء داك side effect. هاد ل Function كايتم التفعيل ديالها تلقائيا من طرف useEffect ملي ل component كايتحيد, بتعبير أخر عندما تنتهي دورة حياته.

ناخدو المثال ديال setTimeout او نشوفو كيفاش غايكون ل Code:

 useEffect(() => {

    const timeOutId = setTimeout(()=>{
    //  هنا لكود  اللي بغيتيه يخدم من بعد مدة زمنية 
    }, 5000) // كمثال 5  ثواني

   return () => {
    // Side Effect Cleanup
       clearTimeout(timeOutId)
    }
},[]);

setTimeout كاترد لينا id خاص بيها باش إمكلينا نلغيوها بإستعمال clearTimeout. فهاد المثال اللي لفوق حطينا ل id فمتغير سميناه timeOutId او عطيناه ل clearTimeout اللي حطيناها في ل Function ديال ل cleanup.

النهاية :

useEffect مفيدة بزاف و إمكلك تستعملها باش تحقق العديد من الأشياء لكن خاصك تستعملها بحدر و تأكد أنك كاتعطيها ل cleanup function باش تجنب ل Memory leak. كانتمنا تكونو ستافدتو من هاد المقال. و إلى اللقاء في مقال أخر