الهدف
بعد هالدرس تقدر تختار state management solution صحيح لحجم مشروعك، وتكتب Zustand store يشتغل مع TypeScript.
ليش هذا الحين؟
AI جاهز. الحين الـ UI complexity — لما تكون عندك بيانات لازم تنشارك بين components مختلفة. هالدرس يمنعك من الـ re-render hell.
الفكرة
الـ State Levels:
حجم المشروع الحل
──────────────────────────────────────────────
1-2 component useState
Medium (10+ comp.) React Context أو Zustand
Large (50+ comp.) Zustand
Enterprise Redux Toolkit
ليش مو Context دايما؟
Context مشكلة:
كل component يستخدمه = يـ re-render لما أي value تتغير
50 component يستخدمون context → كل حدث يـ re-render 50 مرة
Zustand:
كل component يـ subscribe بس للـ slice اللي يهمه
غيّرت الـ counter → بس الـ Counter component يـ re-render