Me yaushe za a baje UI state daga server state?

Question

Accepted Answer

**UI state** shine bayani da aikinka ke mallaka kuma yana sarrafa shi a gida (awaye, shigar fomu, zaɓaɓɓen tab). **Server state** shine bayani da ke zaune akan server kuma kawai a ƙwanƙwasa tare da client (masu amfani da aka ji, kayayyaki, abubuwa). Suna da amfani tsattsarki daban-daban kuma suna bukatar kayan aiki daban-daban.

## Bambance-bambancen mahimmanci

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

## Me yasa tumanin bayani na server a matsayin UI state ba daidai ba

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

Za ka sake gina madaidaicin loding/kuskurin, ƙwanƙwasa, sake fito, ƙaryar naúka, da sarrafawa na tsohuwa — ga kowane fito.

## Kayan aiki daidai: server-state matsayin

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

Wanan kayan aiki an gina su musamman don matsayin server state — kiyaye ƙwanƙwasa na gida a jiya tare da kabara nesa.

## Rarraba na aiki

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

## Me yasa ya zama mahimmanci

Ganin cewa server state shine **ƙwanƙwasa na bayani nesa** — ba mulki ta gida ba — shine mahimmancin fahimta don gida na zamani.

Ya bayyana me yasa jefawa bayani API cikin Redux/useState ke haifar da tumaki na lambar sako/ƙwanƙwasa, da me yasa kayan aiki na server-state da aka dedicate (React Query, SWR) ya wanzu kuma an yarda dashi sosai.

Rarrabe gida biyu — UI state a wuraren ajiya masu gida, server state a ƙwanƙwasa tsayin kayan aiki — sauƙaƙe manyan jigogi na bayani da jumloli da ɓuɓɓuɓɗun tsohuwa.