Apa alasane kanggo mbedakake UI state saka server state?

Question

Accepted Answer

**UI state** yaiku data sing dipunyai lan dikontrol aplikasine kanthi lokal (toggle, input formulir, tab sing dipilih). **Server state** yaiku data sing manggon ing server lan mung *dicache* ing klien (user sing dijupuk, produk, post). Padha duwe karakteristik sing beda-beda lan butuh alat-alat sing beda.

## Perbedaen utama

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

## Apa sebabe ndadekke data server kaya UI state bisa salah

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

Kowe bakal ngrombak maneh panuluran loading/error, caching, refetching, deduplication, lan staleness handling — saben fetch.

## Alat sing tepat: perpustakaan server-state

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

Perpustakaan-perpustakaan iki dirancang kanthi spesifik kanggo masalah server-state — njaga cache lokal tetap sinkron karo sumber remote.

## Pamisahan praktis

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

## Apa sebabene penting

Ngenali yen server state yaiku **cache data remote** — dudu state lokal biasa — yaiku pangertèn utama kanggo arsitektur frontend modern.

Njelaske apa sebabe nemtokke API data menyang Redux/useState ndadekke duwit gunung kode caching/loading manual, lan apa sebabene perpustakaan server-state dedikasi (React Query, SWR) ana lan luwih dipake.

Misahake loro-lorone — UI state ing panyiimpanan lokal, server state ing perpustakaan caching — nyederhanakake aplikasi rich-data sacara drastis lan ngilangne kategori gedhé boilerplate lan bug staleness.