React • المستوى الثالث • الدرس 2

جلب البيانات الخارجية من الخوادم (Fetching Data with useEffect)

أهداف الدرس العلمية

دمج fetch داخل useEffect لجلب البيانات تلقائياً.
استخدام [] لمنع إدخال التطبيق في حلقة جلب لانهائية (Infinite Loop).
تحويل استجابة الخادم إلى JSON وتخزينها في الـ State.
عرض البيانات المستدعاة ديناميكياً عبر map().

1. مصفوفة الاعتماديات الفارغة []

تخبر React بتشغيل التأثير مرة واحدة فقط فور تركيب (Mounting) المكون بالصفحة. هذا هو النمط المعياري لجلب البيانات عند فتح الصفحة.

javascript

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []); // ← مصفوفة فارغة = مرة واحدة عند Mount

2. دورة جلب البيانات (Data Fetching Lifecycle)

عند فتح الصفحة، تحدث الخطوات التالية بالتسلسل:

1. Component mounts → useEffect runs
2. fetch() sends HTTP request to API
3. Server responds with JSON data
4. setUsers(data) updates state
5. Component re-renders with new data ✨

التطبيق العملي المباشر

تحدي الدرس الثاني: تغيير عدد النتائج

قم بالتعديل على الكود في المحرر أدناه:

عدّل رابط الـ API لجلب 5 مستخدمين بدلاً من 3.
غيّر الرقم في نهاية الرابط من _limit=3 إلى _limit=5.
شغّل الكود ولاحظ ظهور المستخدمين الإضافيين تلقائياً.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث