لوکل اور گلوبل state کے درمیان کیا فرق ہے؟

Question

Accepted Answer

**لوکل state** ایک واحد کمپوننٹ (یا ایک چھوٹے subtree) سے متعلق ہے اور کہیں اور اس کی ضرورت نہیں ہے۔ **گلوبل state** ایپ کے دوران بہت سے، اکثر دور دور کے کمپوننٹس میں شیئر کی جاتی ہے۔

## لوکل state — ایک کمپوننٹ تک محدود

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

لوکل state کمپوننٹ کے اندر رہتی ہے (`useState`, `ref`, `data()`)۔ مثالیں: input کی values، آیا dropdown کھلا ہے، hover state، form کا draft۔ کوئی اور کمپوننٹ اس کی پروا نہیں کرتا۔

## گلوبل state — ایپ بھر میں شیئر کی ہوئی

```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
```

گلوبل state وہ ڈیٹا ہے جو بہت سے غیرمتعلقہ کمپوننٹس کو مستقل طور پر پڑھنا یا اپڈیٹ کرنا ہوتا ہے: لاگ ان شدہ صارف، theme، shopping cart، ایپ وسیع اطلاعات۔ یہ 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
```

## ایک عام غلطی: حد سے زیادہ global بنانا

```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("");
```

سب کچھ global بنانے سے boilerplate بڑھتا ہے، کمپوننٹس منسلک ہوتے ہیں، اور کارکردگی متاثر ہو سکتی ہے (زیادہ re-renders)۔ بہترین طریقہ یہ ہے کہ **state کو ممکنہ حد تک لوکل رکھیں**، اور صرف اسے global میں اٹھائیں جب شیئرنگ سے واقعی ضرورت ہو۔

## یہ کیوں اہم ہے

لوکل بمقابلہ global کا انتخاب state کے سب سے اہم فیصلوں میں سے ایک ہے۔

State کو لوکل رکھنا کمپوننٹس کو سادہ، خود مختار، اور کارکردگی سے بھرپور رکھتا ہے؛ global state کو صرف تب استعمال کریں جب ڈیٹا واقعی شیئر کیا جا رہا ہو تاکہ غیر ضروری پیچیدگی سے بچا جا سکے۔

عام anti-pattern — سب کچھ گلوبل store میں ڈالنا "بس اگر ضرورت ہو" — موٹے، سختی سے منسلک ایپس کی طرف لے جاتا ہے۔

رہنما اصول: **ڈیفالٹ طور پر لوکلائز کریں، صرف شیئرنگ کی ضرورت ہو تو global بنائیں۔**