كيف تقرر أين يجب أن تعيش كل جزء من الحالة؟

Question

Accepted Answer

يعتبر القرار **بشأن مكان الحالة** أحد أهم مهارات العمارة البرمجية. المبدأ الموجه: ضع كل جزء من الحالة في **النطاق الأضيق** الذي لا يزال يرضي الجميع الذين يحتاجونها — وطابق كل *نوع* من الحالة مع الأداة الصحيحة.

## إطار عمل للقرار

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## الفئات وأماكنها

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## الأخطاء الشائعة التي يمنعها الإطار

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## عنوان URL هو حالة لم تستخدم بشكل كافٍ

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## لماذا هذا مهم

حيث تعيش الحالة يحدد بساطة التطبيق وأدائه وصيانته.

المهارة هي مقاومة الرغبة في جعل كل شيء عام (global) وبدلاً من ذلك **إضفاء الطابع المحلي بشكل افتراضي، ومطابقة كل نوع من الحالة مع أداته الصحيحة** (بيانات الخادم → React Query، القابلة للاشتقاق من URL → URL، واجهة المستخدم → محلي/store).

يؤدي الحصول على هذا بشكل صحيح إلى تجنب مشاكل العمارة الأكثر شيوعاً — بيانات الخادم المحشوة في Redux، والحالة المعممة بشكل كبير مما يسبب إعادة تصيير، والمرشحات في حالة المكون بدلاً من URL.

هذا الحكم هو ما يميز العمارة الحالة النظيفة والقابلة للتوسع عن الواحدة المعقدة.