الهدف
بنهاية الدرس تفهم الفرق بين local state و server state و global state، تعرف متى تستخدم كل نوع، وتبني data fetching صح بـ React Query بدل useEffect.
ليش هذا الحين؟
ترى "state management" هو الموضوع اللي يضيّع أكثر المطورين الجدد. يسمعون عن Redux و Zustand و Context و Recoil ويقعدون يحتارون شنو يستخدمون. الجواب البسيط: 80% من الـ apps تحتاج useState للـ UI state، و React Query للبيانات من الـ server. هالدرس يعطيك framework تقرر فيه — بدون ما تضيّع وقت في over-engineering.
الفكرة
State = أي بيانات تتغير في الـ app.
عندك ثلاث أنواع:
1. Local State — data لـ component واحد:
- الـ tab المفتوح حاليا
- الـ modal مفتوح لو لا
- نص في input field
- الأداة:
useState— كافي وزيادة
2. Server State — data تجي من الـ server:
- قائمة المستخدمين
- بيانات الـ post
- أي شي تجيبه من database أو API
- المشكلة: لو استخدمت
useEffect + useStateيدويا، تحتاج تدير الـ loading/error/caching/refetching بنفسك - الأداة: React Query — يدير كل هذا تلقائيا
3. Global State — data تحتاجها components وايد في أماكن مختلفة:
- معلومات الـ user المسجّل
- الـ theme (dark/light)
- language preference
- الأداة: Zustand — استخدمه بس لما تحتاجه فعلا
القاعدة الذهبية: ارفع الـ state لأعلى مستوى يحتاجه — ومو أعلى من جذي.
Component A (ما يحتاج هالـ state)
└── Component B (يحتاج)
└── Component C (يحتاج)
↑ الـ state يروح في Component A لأنه parent الاثنين