การดำเนินการแบบอะซิงโครนัส (API calls) มีผลลัพธ์ที่เป็นไปได้มากมาย ดังนั้นคุณต้องจำลอง มากกว่าเพียงข้อมูล — คุณต้องแสดงสถานะการโหลด สำเร็จ และข้อผิดพลาด การจำลองที่ดีช่วยป้องกัน UI bugs เช่น การแสดงข้อมูลเก่าหรือไม่มีการตอบกลับ
[data, setData] = ();
[loading, setLoading] = ();
[error, setError] = ();
ธงที่เป็นอิสระอนุญาตให้มีชุดค่าผสมที่ขัดแย้ง (loading และ error และ data พร้อมกัน) ซึ่งควรจะเป็นไปไม่ได้ — แหล่งที่มาของ UI bugs ที่สับสน
// ✅ a single `status` makes states mutually exclusive
const [state, setState] = useState({ status: "idle", data: null, error: null });
// status is one of: 'idle' | 'loading' | 'success' | 'error'
async function load() {
setState({ status: "loading", data: null, error: null });
try {
const data = await api.get();
setState({ status: "success", data, error: null });
} catch (e) {
setState({ status: "error", data: null, error: e.message });
}
}
ฟิลด์ status เดียวทำให้สถานะ แยกออกจากกันเอง — คุณไม่สามารถอยู่ในสถานะ loading และ error ได้พร้อมกัน การเรนเดอร์จะเป็น switch ที่สะอาด:
switch (state.status) {
case "loading": return <Spinner />;
case "error": return <Error message={state.error} />;
case "success": return <List data={state.data} />;
default: return <Idle />;
}
idle — hasn't started yet (vs loading)
empty — succeeded but no results (show "No items" not a blank screen)
refetching— has old data AND is loading new (show data + a subtle spinner)
// React Query / SWR model all of this for you
const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn });
Server-state libraries จัดเตรียมสถานะเหล่านี้ (บวกกับการ caching, refetch, stale-while-revalidate) ออกมาจากกล่อง — โดยปกติจะดีกว่าการเขียนเอง
การจำลองสถานะ async ที่ถูกต้อง — เป็นสถานะเดียวแทนที่จะเป็น boolean หลวม — ช่วยขจัด UI bugs ทั้งชั้น (สถานะที่ขัดแย้ง การขาดข้อมูลการตอบกลับการโหลด/ข้อผิดพลาด/ว่าง) และทำให้ตรรกะการเรนเดอร์สะอาดและครบถ้วน
การรู้จักชุดสถานะที่สมบูรณ์ (idle, loading, success, error, empty, refetching) นำไปสู่ UX ที่ดีขึ้น และการรู้ว่า server-state libraries จัดการสิ่งนี้ทั้งหมดคือสิ่งที่ทำให้โค้ดการดึงข้อมูลง่ายและมั่นคง
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค