Frontend Academy · درس

أساسيات useEffect: الاعتماديات والتنظيف

نفّذ الآثار الجانبية بعد التصيير، وتحكّم في إعادة تشغيلها باستخدام مصفوفة الاعتماديات، وأعد دالة تنظيف لتجنّب تسرّبات الذاكرة.

أساسيات useEffect: الاعتماديات والتنظيف درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هي useEffect؟

تنفّذ useEffect تأثيرًا جانبيًا بعد أن تنفّذ React عملية العرض. تشمل التأثيرات الجانبية جلب البيانات، والاشتراك في الأحداث، وإعداد المؤقتات، والتفاعل مع واجهات API الخارجية. تُنفَّذ التأثيرات بعد الرسم، وليس أثناء العرض.

البنية الأساسية

useEffect(effect, deps?). تُنفَّذ دالة التأثير بعد كل عملية عرض افتراضيًا. قدّم مصفوفة تبعيات للتحكم في وقت تنفيذها.

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    console.log('Ran after every render');
  });
}

تتحكم مصفوفة التبعيات في وقت تنفيذ التأثير

المصفوفة الفارغة []: التنفيذ مرة واحدة بعد التركيب. المصفوفة غير الفارغة [a, b]: التنفيذ عند تغيّر a أو b. عدم تقديم مصفوفة: التنفيذ بعد كل عملية عرض، وهذا نادرًا ما يكون ما تريده.

// Run once on mount:
useEffect(() => {
  fetchInitialData();
}, []);

// Run when userId changes:
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Run after every render (usually a bug):
useEffect(() => {
  trackPageView();
});

دالة التنظيف

أعد دالة من useEffect لتنفيذ التنظيف، مثل إزالة مستمعي الأحداث، وإلغاء الاشتراكات، ومسح المؤقتات. يُنفَّذ التنظيف قبل التأثير التالي وعند إزالة المكوّن.

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Cleanup: remove listener when effect re-runs or component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

الإغلاقات القديمة في التبعيات

تحتفظ التأثيرات بالقيم التي تشير إليها وقت إنشائها. إذا قرأت قيمة حالة أو خاصية داخل تأثير من دون إدراجها في التبعيات، فسترى قيمة قديمة. تكتشف قاعدة exhaustive-deps في ESLint هذه المشكلة.

قاعدة exhaustive-deps في ESLint

تحذّر قاعدة react-hooks/exhaustive-deps في ESLint عند غياب تبعيات التأثير. يكاد يكون اتباع اقتراحاتها صحيحًا دائمًا، لأن التبعيات القديمة تسبب أخطاء.

useEffect مقابل useLayoutEffect

يُنفَّذ useEffect بعد أن يرسم المتصفح الصفحة. أما useLayoutEffect فيُنفَّذ بشكل متزامن بعد تغييرات DOM وقبل الرسم. استخدم useLayoutEffect لقراءة قياسات DOM لتجنب الوميض المرئي.

تأثيرات متعددة

استخدم عدة استدعاءات لـ useEffect لفصل الاهتمامات غير المرتبطة. يمكن أن يكون لكل تأثير مصفوفة تبعيات ومنطق تنظيف خاص به.

// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
  const sub = wsClient.subscribe(onMessage);
  return () => sub.unsubscribe();
}, []);

حالات التنافس — علامة التجاهل

عندما يجلب تأثير البيانات استنادًا إلى الخصائص، قد تكتمل الطلبات الأقدم بعد الطلبات الأحدث. استخدم علامة تنظيف لتجاهل الاستجابات القديمة.

useEffect(() => {
  let ignore = false;

  async function load() {
    const data = await fetchUser(userId);
    if (!ignore) setUser(data); // only update if not cleaned up
  }

  load();
  return () => { ignore = true; };
}, [userId]);

التنفيذ المزدوج للتأثير في Strict Mode

تعمل Strict Mode في React 18 على تركيب المكوّنات ثم إزالتها وإعادة تركيبها أثناء التطوير لكشف أخطاء التنظيف. ستُنفَّذ تأثيراتك مرتين، وهذا مقصود ويساعد في اكتشاف التنظيف المفقود.

متى لا تستخدم useEffect

لا تستخدم useEffect من أجل: 1) اشتقاق الحالة من الخصائص، بل احسبها أثناء العرض؛ 2) إعادة ضبط الحالة عند تغيّر الخصائص، بل استخدم خاصية key؛ 3) تحديث الحالة دون شرط، لأن ذلك يسبب حلقات لا نهائية. عند الشك، اسأل نفسك: هل يستجيب هذا الرمز لحدث من المستخدم أم لنظام خارجي؟

تحقق سريع

متى تُنفَّذ دالة التنظيف في useEffect؟

مراجعة: useEffect

تُنفَّذ التأثيرات الجانبية بعد العرض. مصفوفة التبعيات الفارغة = مرة واحدة عند التركيب. مصفوفة التبعيات = عند تغيّرات محددة. أعد دالة تنظيف لمنع التسربات. استخدم تأثيرات متعددة لفصل الاهتمامات. تمنع علامة التجاهل استجابات الجلب القديمة. تُنفّذ Strict Mode التأثير مرتين لاختبار التنظيف. لا تستخدم useEffect للقيم المشتقة أو للحالة التي يمكنك حسابها أثناء العرض.

الأسئلة الشائعة

هل درس «أساسيات useEffect: الاعتماديات والتنظيف» مجاني؟

نعم — نص درس «أساسيات useEffect: الاعتماديات والتنظيف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «أساسيات useEffect: الاعتماديات والتنظيف»؟

نفّذ الآثار الجانبية بعد التصيير، وتحكّم في إعادة تشغيلها باستخدام مصفوفة الاعتماديات، وأعد دالة تنظيف لتجنّب تسرّبات الذاكرة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «أساسيات useEffect: الاعتماديات والتنظيف»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy