Bạn mô hình hóa state async/loading như thế nào?

Question

Accepted Answer

Các thao tác bất đồng bộ (gọi API) có nhiều kết quả khả dĩ, nên bạn phải mô hình hóa **nhiều hơn chỉ dữ liệu** — bạn cần biểu diễn các trạng thái loading, success, và error. Mô hình hóa tốt điều này giúp ngăn các bug UI như hiển thị dữ liệu cũ hoặc không có phản hồi nào. ## Cách tiếp cận ngây thơ và các khiếm khuyết ```js // ❌ các boolean riêng lẻ — có thể biểu diễn các tổ hợp bất khả thi const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // { loading: true, error: "x", data: [...] } nghĩa là gì? Một state không hợp lệ. ``` Các flag độc lập cho phép các tổ hợp mâu thuẫn (loading *và* error *và* data cùng lúc) vốn lẽ ra phải bất khả thi — một nguồn của các bug UI gây bối rối. ## Tốt hơn: một status enum (một state machine nhỏ) ```js // ✅ một `status` duy nhất khiến các state loại trừ lẫn nhau const [state, setState] = useState({ status: "idle", data: null, error: null }); // status là một trong: '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 }); } } ``` Một field `status` duy nhất khiến các state **loại trừ lẫn nhau** — bạn không thể vừa loading vừa error. Việc render trở thành một switch sạch sẽ: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Đừng quên các state thường bị bỏ sót ```text idle — chưa bắt đầu (khác với loading) empty — thành công nhưng không có kết quả (hiển thị "No items" thay vì màn hình trống) refetching— có dữ liệu cũ VÀ đang load dữ liệu mới (hiển thị data + một spinner tinh tế) ``` ## Cách tiếp cận tốt nhất cho dữ liệu server: dùng một thư viện ```jsx // React Query / SWR mô hình hóa tất cả điều này cho bạn const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Các thư viện server-state cung cấp các state này (cùng với caching, refetch, stale-while-revalidate) ngay từ đầu — thường tốt hơn tự dựng tay. ## Tại sao điều này quan trọng Mô hình hóa state async đúng cách — như một status duy nhất thay vì các boolean rời rạc — loại bỏ cả một lớp bug UI (state mâu thuẫn, thiếu phản hồi loading/error/empty) và khiến logic render sạch sẽ và đầy đủ (exhaustive). Nhận biết toàn bộ tập state (idle, loading, success, error, empty, refetching) dẫn đến UX tốt hơn, và biết rằng các thư viện server-state xử lý tất cả điều này là điều giữ cho code fetch dữ liệu đơn giản và bền vững.