คุณจะดึงข้อมูลใน React และหลีกเลี่ยง race conditions ได้อย่างไร

Question

Accepted Answer

แนวทางพื้นฐานใช้ `useEffect` แต่คุณต้องจัดการ **cleanup** และ **การตอบสนองที่มาไม่เป็นลำดับ** หรือคุณจะได้รับข้อมูลเก่า ๆ และคำเตือน

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## ทำไมถึงสำคัญ

สมมติว่า `id` เปลี่ยนแปลงอย่างรวดเร็วจาก `1` เป็น `2` หากปราศจากการยกเลิก คำขอทั้งสองกำลังบิน หากคำขอ `1` ช้าและแก้ไข **หลังจาก** คำขอ `2` คุณจะแสดงข้อมูลของผู้ใช้ `1` สำหรับผู้ใช้ `2`:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

การยกเลิกคำขอก่อนหน้านี้ (cleanup) แก้ปัญหานี้ได้ รูปแบบ boolean-flag เก่า ๆ (`let active = true; ... if (active) setUser(...)`) บรรลุสิ่งเดียวกันโดยการเพิกเฉยต่อการตอบสนองที่เก่า ๆ

## ในแอปจริง ให้ใช้ไลบรารี่

การดึงข้อมูลด้วยตนเองนั้นซ้ำ ๆ และพลาดการ caching/retries **React Query (TanStack Query)** หรือ **SWR** จัดการสถานะ loading/error การแคช deduplication background refetch และ stale-while-revalidate สำหรับคุณ:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

กับ frameworks เช่น Next.js server-side data loaders มักจะเป็นที่ต้องการ