ست أنواع لحالة العميل

حالة واجهة محلية

useState. حالة تخص Component واحدة، ومش محتاج Components تانية تعرفها.

• هل الـ Dropdown مفتوح؟
• هل الـ Modal مفتوحة؟
• الـ Password ظاهر ولا مخفي؟
• هل المستخدم اختار تبويب معين داخل Component؟

const [isOpen, setIsOpen] = useState(false);

المكان: داخل الـ Component نفسها.

حالة واجهة مشتركة

Context أو Zustand. حالة واجهة مشتركة بين Components مختلفة، ومش محتاجة تكون موجودة في الـ URL.

• فتح وإغلاق الـ Sidebar على مستوى التطبيق.
• فتح Global Command Palette.
• حالة الـ Multi-step modal.
• تفضيل مؤقت لعرض الـ Grid أو List لو مش محتاج تحفظه في الرابط.

type LayoutState = {  sidebarOpen: boolean;  toggleSidebar: () => void;};

المكان: Store أو Context حسب حجم المشاركة والتعقيد.

حالة الرابط

Search Params أو الـ Router. الحالة اللي عايزها تفضل موجودة لو المستخدم عمل Refresh أو شارك الرابط مع شخص تاني.

• البحث عن shoes.
• فلتر السعر من 500 إلى 2000.
• التصنيف المختار.
• الصفحة الحالية في Pagination.
• ترتيب المنتجات حسب السعر.

/products?category=shoes&minPrice=500&sort=price-asc&page=2

المكان: الـ URL، مش Zustand كنسخة منفصلة من نفس البيانات.

حالة الفورم

React Hook Form. الحالة اللي المستخدم بيكتبها أو يعدلها قبل ما يعمل Submit.

• بيانات تسجيل الدخول.
• عنوان الشحن.
• بيانات الدفع.
• كود الخصم قبل تطبيقه.
• أخطاء الـ Validation.

type ShippingForm = {  fullName: string;  address: string;  phone: string;};

المكان: React Hook Form أو إدارة النماذج المناسبة، مش Global Store لمجرد إن فيه أكتر من حقل.

حالة دومين يملكها العميل

Zustand أو Reducer. دي حالة فعلية في التطبيق، مش مجرد UI، لكنها تحت سيطرة الـ Client مؤقتًا أو بشكل محلي.

• سلة مشتريات Guest قبل تسجيل الدخول.
• المنتجات المختارة في مقارنة المنتجات.
• اختيارات Configurator لمنتج قابل للتخصيص.
• المنتجات المحددة في Bulk Actions.
• مسودة Order لم تُرسل للسيرفر بعد.

المكان: Store أو Reducer لو محتاجة مشاركة أو منطق معقد. لو البيانات بسيطة ومحدودة بصفحة واحدة، ممكن تفضل Local State.

حالة محفوظة بعد الإغلاق

localStorage أو IndexedDB. دي مش فئة منفصلة تمامًا عن الأنواع السابقة. هي طريقة لحفظ الـ State بعد إغلاق الصفحة أو عمل Refresh.

• Theme: Dark أو Light.
• تفضيل اللغة.
• سلة Guest لو قررت تحفظها محليًا.
• مسودة نموذج طويلة.

المكان: تخزين محلي عند الحاجة، مع تحديد سياسة انتهاء البيانات ومزامنتها. تجنّب تخزين بيانات حساسة مثل معلومات الدفع أو الأسرار في localStorage.

خلّصت الفصل لما

• تحط فتح مودال خاص بكومبوننت في useState
• تحط فلتر قابل للمشاركة في الرابط مش في Zustand
• تحط كتابة الشحن في الفورم مش في متجر عام
• تعرف إن التخزين المحلي طريقة حفظ مش نوع سابع من الداتا