آپ یہ کیسے فیصلہ کرتے ہیں کہ state کا ہر ٹکڑا کہاں رہنا چاہیے؟

Question

IT Interview Practice · Accepted Answer

state کہاں رہے، یہ فیصلہ کرنا سب سے اہم architecture کی مہارتوں میں سے ایک ہے۔ بنیادی اصول: ہر piece of state کو **سب سے تنگ scope** میں رکھیں جو ابھی بھی ان سب کو مطمئن کرتا ہے جو اسے چاہتے ہیں — اور ہر *قسم* کے state کو صحیح tool سے match کریں۔

## فیصلہ کاری کا ڈھانچہ

```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 کم استعمال شدہ state ہے

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

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

State کہاں رہتا ہے یہ app کی سادگی، کارکردگی، اور maintainability کا تعین کرتا ہے۔

یہ مہارت سب کچھ global بنانے کی خواہش کا مقابلہ کرنے اور اس کی بجائے **default کے لحاظ سے localizing، ہر قسم کے state کو اس کے مناسب tool سے match کرنے** میں ہے (server data → React Query، URL-derivable → URL، UI → local/store)۔

یہ صحیح کرنا سب سے عام architecture کے مسائل سے بچاتا ہے — Redux میں رکھا گیا server data، over-globalized state جو re-renders کا سبب بنتا ہے، اور component state میں filters۔

yہ فیصلہ جات وہ ہیں جو ایک صاف، scalable state architecture کو ایک الجھے ہوئے سے الگ کرتے ہیں۔

فیصلہ کاری کا ڈھانچہ

زمرے اور ان کے گھر

عام غلطیاں جو یہ ڈھانچہ روکتا ہے

URL کم استعمال شدہ state ہے

یہ کیوں اہم ہے

متعلقہ سوالات