เหตุใดจึงต้องแยกความแตกต่างระหว่าง UI state และ server state

Question

IT Interview Practice · Accepted Answer

**UI state** คือ ข้อมูลที่แอปของคุณเป็นเจ้าของและควบคุมเฉพาะที่ (toggles, form inputs, selected tab) **Server state** คือ ข้อมูลที่อยู่บนเซิร์ฟเวอร์และเพียง *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
```

## เหตุใดการปฏิบัติข้อมูลเซิร์ฟเวอร์เหมือน UI state จึงผิดพลาด

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

ท้ายที่สุดคุณจะพบว่าตนเองต้องนำกลับมาใช้ tracking loading/error, caching, refetching, deduplication และ staleness handling — สำหรับทุก 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
}
```

ไลบรารีเหล่านี้ถูกสร้างขึ้นเพื่อแก้ปัญหา server-state โดยเฉพาะ — เก็บ local cache ให้ซิงค์กับ remote source

## การแยกแบบปฏิบัติ

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

## เหตุใดจึงสำคัญ

การตระหนักว่า server state คือ **cache ของ remote data** — ไม่ใช่ local state ธรรมชาติ — เป็นความเข้าใจที่สำคัญสำหรับ frontend architecture แบบสมัยใหม่

มันอธิบายว่าทำไมการนำ API data ลงใน Redux/useState จึงนำไปสู่ mountains of manual caching/loading code และทำไม dedicated server-state libraries (React Query, SWR) จึงมีอยู่และได้รับการยอมรับอย่างกว้างขวาง

การแยก UI state ใน local stores และ server state ใน caching library — ทำให้แอปที่มีข้อมูลมากมายง่ายขึ้นอย่างมากและกำจัด boilerplate ขนาดใหญ่และ staleness bugs

ความแตกต่างหลัก

เหตุใดการปฏิบัติข้อมูลเซิร์ฟเวอร์เหมือน UI state จึงผิดพลาด

เครื่องมือที่ถูกต้อง: server-state library

การแยกแบบปฏิบัติ

เหตุใดจึงสำคัญ

คำถามที่เกี่ยวข้อง