السؤال الأولمين مالك الداتا؟ متشاركة؟ جاية من السيرفر؟
واجهة كومبوننت واحدة
useState. مودال، دروب داون، إظهار الباسوردواجهة مشتركةContext أو Zustand. سايدبار، باليت، جريد أو ليست مؤقت
قابلة للمشاركةالـ URL. بحث، سعر، تصنيف، صفحة، ترتيب
قبل الإرسالReact Hook Form. شحن، دفع، كوبون، أخطاء التحقق
دومين عند العميلZustand أو Reducer. سلة ضيف، مقارنة، مسودة أوردر
بعد الإغلاق
localStorage أو IndexedDB. ثيم، لغة. مش بيانات دفعمن السيرفرTanStack Query. منتجات، سعر، سلة السيرفر، نتيجة كوبون
متكررشسلة السيرفر متبقاش نسخة في Zustand ونسخة في Query
سلة الضيفمحليًا، وبعد الدخول Merge بقواعد الباك
في FSDالستور في الشريحة المالكة، والهيدر يقرأ الكويري
ابدأ بـ useState للحالة المحلية، والـ URL للفلاتر والتنقل القابل للمشاركة، و React Hook Form للنماذج، و TanStack Query لبيانات السيرفر. أضف Zustand فقط لما تكون عندك Client State مشتركة فعلًا، أو منطق معقّد يستفيد من Store مركزية.
خلّصت الموضوع لما
🧠 اختبر نفسك
١) المستخدم اختار Category وعايز يشارك رابط الفلتر. Zustand ولا URL ولا TanStack Query؟
URL Search Params. الفلاتر اللي نرجعها ونشاركها تكون في الرابط، وتدخل في الـ Query Key.
٢) مودال تسجيل الدخول مفتوحة أو مقفولة، وكومبوننت واحدة بتتحكم فيها. useState ولا Redux ولا localStorage؟
useState. الحالة محلية وبسيطة، مش محتاجة Store عامة.٣) بيانات المنتجات وأسعارها من الباك. Zustand ولا TanStack Query ولا React Hook Form؟
TanStack Query. مصدرها السيرفر، ومحتاجة كاش وإعادة جلب وحالات تحميل وخطأ.
٤) سلة الضيف تفضل بعد الـ Refresh وقبل تسجيل الدخول. Local State بس، ولا Store مع حفظ، ولا URL بس؟
Client Store مع Persistence. حالة يملكها العميل، وتخزين محلي، واستراتيجية مزامنة مع السيرفر بعدين.