ما الفرق بين الحالة المحلية والحالة العامة؟

Question

Accepted Answer

**الحالة المحلية** تنتمي إلى مكون واحد (أو شجرة فرعية صغيرة) ولا تكون مطلوبة في مكان آخر. **الحالة العامة** مشتركة بين عدة مكونات، غالباً بعيدة عن بعضها، في جميع أنحاء التطبيق.

## الحالة المحلية — محدودة لمكون واحد

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

تعيش الحالة المحلية داخل المكون (`useState`, `ref`, `data()`). أمثلة: قيم الإدخال، ما إذا كانت القائمة المنسدلة مفتوحة، حالة التحويم، مسودة النموذج. لا يهتم أي مكون آخر بها.

## الحالة العامة — مشتركة في جميع أنحاء التطبيق

```jsx
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
```

الحالة العامة هي البيانات التي يجب على عدة مكونات غير مرتبطة قراءتها أو تحديثها بشكل متسق: المستخدم المصرح، المظهر، سلة التسوق، إخطارات التطبيق الشاملة. تعيش في Context أو store (Redux/Zustand/Pinia) أو نحو ذلك.

## كيفية الاختيار

```text
Ask: "How many components need this, and how far apart are they?"

One component (or parent+child)         → LOCAL state
Many unrelated components / whole app    → GLOBAL state
```

## خطأ شائع: العولمة المفرطة

```jsx
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);

// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
```

جعل كل شيء عام يضيف النموذج المعياري، ويربط المكونات، ويمكن أن يضر الأداء (المزيد من إعادة التصييب). أفضل ممارسة هي **الحفاظ على الحالة محلية قدر الإمكان**، واللجوء إلى الحالة العامة فقط عندما يتطلب المشاركة ذلك حقاً.

## لماذا يهم

اختيار الحالة المحلية مقابل العامة هو أحد أهم قرارات الحالة.

الحفاظ على الحالة محلية يبقي المكونات بسيطة وذاتية الاحتواء وفعالة؛ وعدم اللجوء للحالة العامة إلا عندما تكون البيانات مشتركة حقاً يتجنب التعقيد غير الضروري.

النمط المعاكس الشائع — وضع كل شيء في متجر عام "فقط في الحالة" — يؤدي إلى تطبيقات منتفخة وموحدة بإحكام.

القاعدة الموجهة: **حلل بشكل افتراضي، عمم فقط عندما تفرضه المشاركة.**