UI state اور server state میں کیا فرق ہے؟

Question

Accepted Answer

**UI state** وہ ڈیٹا ہے جو آپ کی ایپلیکیشن مقامی طور پر رکھتی ہے اور کنٹرول کرتی ہے (toggles، form inputs، selected tab)۔ **Server state** وہ ڈیٹا ہے جو سرور پر رہتا ہے اور client پر محض *cached* ہوتا ہے (fetched users، products، posts)۔ ان کی بنیادی طور پر مختلف خصوصیات ہیں اور انہیں مختلف ٹولز کی ضرورت ہے۔

## کلیدی فرق

```text
                  UI state                    Server state
Ownership         you own it (client)         the server owns it; client caches
Freshness         always current              can become STALE (server changed it)
Sync needed?      no                          yes — refetch, invalidate, revalidate
Shared?           usually one client          shared across users/devices/tabs
Concerns          just set/read it            caching, loading, errors, retries, dedup
```

## Server data کو UI state کی طرح treat کرنے سے کیا غلط ہوتا ہے

```jsx
// ❌ treating server data as plain local state — you must hand-build everything
function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetch("/api/users")
      .then(r => r.json()).then(setUsers)
      .catch(setError).finally(() => setLoading(false));
  }, []);
  // and now: caching? refetch on focus? dedup? retries? stale data? all manual 😓
}
```

آپ loading/error tracking، caching، refetching، deduplication، اور staleness handling کو دوبارہ implement کرنے میں پھنس جاتے ہیں — ہر fetch کے لیے۔

## صحیح ٹول: ایک server-state library

```jsx
// ✅ React Query / SWR / RTK Query handle caching, loading, errors, refetch for you
function Users() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then(r => r.json()),
  });
  // automatic: caching, background refetch, dedup, retries, stale-while-revalidate
}
```

یہ libraries بخصوص server-state مسئلے کے لیے بنائی گئی ہیں — local cache کو remote source کے ساتھ sync رکھنا۔

## عملی تقسیم

```text
UI state    → useState / Zustand / Context / Redux
Server state→ React Query / SWR / RTK Query / Apollo (for GraphQL)
```

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

یہ سمجھنا کہ server state ایک **remote data کا cache** ہے — عام local state نہیں — یہ جدید frontend architecture کے لیے ایک بہت بڑی بصیرت ہے۔

یہ بتاتا ہے کہ API data کو Redux/useState میں ڈالنا کیوں manual caching/loading code کے پہاڑ کی طرف لے جاتا ہے، اور کیوں dedicated server-state libraries (React Query، SWR) موجود ہیں اور بہت وسیع پیمانے پر استعمال ہو رہے ہیں۔

dونوں کو الگ کرنا — UI state کو local stores میں، server state کو caching library میں — ڈیٹا سے بھری ہوئی ایپلیکیشنز کو ڈرامائی طور پر سادہ کرتا ہے اور boilerplate اور staleness bugs کے ایک بہت بڑے زمرے کو ختم کرتا ہے۔