آپ React Native ایپلیکیشنز میں state کو کیسے منیج کرتے ہیں؟

Question

Accepted Answer

React Native میں state management (جیسے React میں) local component state (useState) سے شروع ہوتی ہے اور **Context** کے ذریعے shared/global state تک پہنچتی ہے، یا **Redux**، **Zustand** اور دیگر لائبریریز استعمال کرتے ہوئے۔ آپشنز کو سمجھنا اور ہر ایک کو کب استعمال کریں یہ اہم ہے کیونکہ ایپلیکیشنز بڑی ہوتی ہیں۔

## Local state اور lifting state up

```text
useState → local component state (simple, for one component)
LIFTING STATE UP → move shared state to a common parent, pass down via props
  → works for moderate sharing, but "PROP DRILLING" (passing through many layers) is painful
```

## Context API — built-in shared state

```jsx
// Context shares state across the tree WITHOUT prop drilling (built into React)
const ThemeContext = createContext();
// provide it high in the tree; consume with useContext anywhere below
const theme = useContext(ThemeContext);
// → good for low-frequency global data (theme, auth, user); can cause re-renders if overused
```

## State management libraries

```text
For complex/global state, libraries help:
  REDUX (+ Redux Toolkit) → predictable centralized store; structured; popular for large
    apps; more boilerplate (RTK reduces it)
  ZUSTAND → minimal, simple, hooks-based store — popular modern lightweight choice
  Jotai / Recoil → atomic state; MobX → observable state
  React Query / TanStack Query → for SERVER state (caching, fetching) — often used
    alongside (handles API data, loading, caching)
```

## Choosing

```text
Simple/local → useState; moderate sharing → lift up / Context
Complex global app state → Redux Toolkit or Zustand (by preference/complexity)
Server/API data → React Query (caching, sync) — distinct from client state
→ Don't over-engineer; match the solution to the app's complexity.
```

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

State management کو سمجھنا اہم ہے کیونکہ **کوئی ایپ state کو کیسے منیج اور شیئر کرتی ہے یہ ایک اہم architectural تشویش ہے** جو ایپلیکیشن کی پیچیدگی کے ساتھ بڑھتی ہے، اس لیے یہ حقیقی React Native ایپس بنانے کے لیے قیمتی علم ہے۔

React Native میں state management React کی طرح کام کرتا ہے، سادہ سے لے کر پیچیدہ تک۔

**Local state** (useState) اور **lifting state up** (shared state کو ایک مشترک parent تک منتقل کرنا) کو سمجھنا بنیادی ضروریات کو پورا کرتا ہے، جبکہ **prop-drilling problem** (state کو بہت سی layers سے گزارنا جو دردناک ہو جاتا ہے) کو پہچاننا بہتر حل کی طرف لے جاتا ہے۔

**Context API** (React کا built-in طریقہ state کو پورے tree میں شیئر کرنے کا بغیر prop drilling کے) low-frequency global data (theme، auth، current user) کے لیے اچھا ہے، اگرچہ اگر زیادہ استعمال ہو تو re-renders کا سبب بن سکتا ہے۔

پیچیدہ/global state کے لیے **state management libraries** کو سمجھنا — **Redux** (Redux Toolkit کے ساتھ، ایک predictable centralized store، structured اور بڑی ایپس کے لیے مشہور)، **Zustand** (minimal، سادہ، hooks-based، ایک مشہور جدید ہلکا انتخاب)، اور دیگر (Jotai، MobX) — اہم app state کو منیج کرنے کے لیے آپشنز فراہم کرتے ہیں۔

اہم بات یہ ہے کہ **React Query/TanStack Query کو server state کے لیے** (API data کو cache اور sync کرنا، client state سے الگ) سمجھنا اس جدید شناخت کو ظاہر کرتا ہے کہ **server state اور client state مختلف تشویشیں ہیں** (API data caching/fetching کے ساتھ اکثر الگ سے ہینڈل کیا جاتا ہے) — ایک قیمتی، تیزی سے اہم فرق۔

**چننے** کا طریقہ سمجھنا (local کے لیے useState، moderate sharing کے لیے Context، complex global state کے لیے Redux Toolkit یا Zustand، server data کے لیے React Query، over-engineering کے بغیر) پختہ فیصلہ کرنے کی صلاحیت کو ظاہر کرتا ہے۔

چونکہ state management ایک اہم architectural تشویش ہے جو maintainability کو متاثر کرتی ہے اور app complexity کے ساتھ بڑھتی ہے، اور چونکہ spectrum (local state، Context، libraries، اور server-vs-client-state distinction) کو سمجھنا اور مناسب طریقے سے منتخب کرنا حقیقی ایپس بنانے کے لیے اہم ہے، React Native میں state management کو سمجھنا قیمتی، عملی علم ہے — building maintainable، scalable React Native ایپس کے لیے ایک اہم architectural رقبہ، آپشنز اور client/server-state distinction کے ساتھ صحیح state architecture کے لیے اہم۔