آپ React میں state management approach کو کیسے منتخب کرتے ہیں؟

Question

Accepted Answer

ٹول کو state کی **قسم** کے ساتھ ملائیں، بجائے اس کے کہ پہلے سے global store کی طرف رجوع کریں۔ زیادہ تر "global state" کے مسائل دراصل اس کام کے لیے غلط ٹول ہیں۔

## فیصلہ کرنے کی گائیڈ

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## سب سے اہم بصیرت: server state ≠ client state

API سے آنے والا ڈیٹا دور کے ڈیٹا کا **cache** ہے، نہ کہ وہ state جس کی آپ ملکیت کرتے ہیں۔ اسے Redux میں ڈالنا اس بات کا مطلب ہے کہ آپ loading، caching، refetching، اور invalidation کو دستی طور پر سنبھالیں — تکلیف دہ اور غلطی کا شکار۔ ایک server-state library سب کچھ کرتی ہے:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## رہنمائی

- state کو **local** کے طور پر رکھیں؛ اسے اس جگہ کے قریب رکھیں جہاں اس کا استعمال ہوتا ہے۔
- تیزی سے بدلنے والی اقدار کو **Context** میں نہ ڈالیں (یہ تمام consumers کو دوبارہ render کرتا ہے)۔
- بار بار updates کے ساتھ shared client state کے لیے، **selective subscriptions** (Zustand/Jotai) والے store کو ترجیح دیں تاکہ components صرف اس slice کے لیے دوبارہ render ہوں جو وہ پڑھتے ہیں۔
- Redux Toolkit کی طرف رجوع کریں جب آپ کو حقیقی طور پر پیچیدہ shared state پر اس کے devtools/middleware/structure کی ضرورت ہو۔

حقیقی مہارت **state کو کم کرنا اور صحیح طریقے سے رکھنا** ہے — نہ کہ library کا انتخاب کرنا۔