React Query กับการจัดการ Server State

React Query หรือ TanStack Query เปลี่ยนวิธีที่เรา manage server state ใน React application โดยแยก server state (ข้อมูลจาก API) ออกจาก client state (UI state) อย่างชัดเจน useQuery เป็น hook หลักสำหรับ fetch ข้อมูล โดย React Query จัดการ loading, error, caching และ background refetching ให้อัตโนมัติ ไม่ต้องเขียน useEffect สำหรับ fetch อีกต่อไป การตั้งค่า staleTime กำหนดว่าข้อมูลใน cache จะ "เก่า" เมื่อไหร่ ถ้าตั้งเป็น 5 นาที React Query จะไม่ refetch ถ้า component mount ภายใน 5 นาทีหลัง fetch ครั้งล่าสุด ช่วยลด unnecessary requests ได้มาก useMutation ใช้สำหรับ create, update, delete และรองรับ optimistic update ซึ่งอัปเดต UI ทันทีก่อนที่ server จะ response แล้วค่อย rollback ถ้า error เกิดขึ้น ทำให้ UX ดูเร็วขึ้นมาก สำหรับ pagination ใช้ useInfiniteQuery ที่รองรับ infinite scroll และ load more pattern ได้อย่างสวยงาม โดย React Query จัดการ page cursor และการ merge ข้อมูลให้อัตโนมัติ