useEffect والتأثيرات الجانبية في React ومشروع ختامي متكامل

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

الشكل العام

useEffect(() => {
  // الكود الذي يعمل بعد العرض
  return () => {
    // التنظيف (اختياري)
  };
}, [اعتماديات]);

ساعة حية مع تنظيف

أخفِ الساعة وراقب وحدة التحكم: دالة التنظيف تمنع تسرب المؤقتات.

التأثير المرتبط بقيمة

خطأ شائع: الحلقة اللانهائية

إذا غيّرت داخل useEffect حالة موجودة في اعتمادياته دون شرط، فسيعمل التأثير بلا توقف. اسأل نفسك دائمًا: هل أحتاج تأثيرًا أصلًا؟ القيم المحسوبة من الحالة (مثل list أعلاه) لا تحتاج useEffect.

الخطوات التالية بعد هذه الدورة

• مشروع حقيقي: npm create vite@latest ثم اختر React. تحتاج Node.js مثبتًا.
• التوجيه بين الصفحات: React Router.
• إطار كامل: Next.js للمواقع التي تهمها سرعة التحميل والسيو.
• الطلبات من الخادم: fetch داخل useEffect، أو مكتبة مثل TanStack Query.

المشروع الختامي

في ملعب React ابنِ «محوّل عملات» صغيرًا:

1. حقل للمبلغ وقائمة للعملة.
2. النتيجة تُحسب مباشرة عند الكتابة.
3. سجّل في وحدة التحكم كل تغيير للعملة باستخدام useEffect مع الاعتمادية المناسبة.
4. نزّل المشروع ملف HTML جاهزًا، ثم أجب عن اختبار الدورة.