Bagaimana Anda memodelkan status async/loading?

Question

Accepted Answer

Operasi asinkron (panggilan API) memiliki beberapa kemungkinan hasil, jadi Anda harus memodelkan **lebih dari sekadar data** — Anda perlu merepresentasikan status loading, sukses, dan error. Memodelkan ini dengan baik mencegah bug UI seperti menampilkan data yang sudah usang atau tidak ada umpan balik. ## The naive approach and its flaws ```js // ❌ separate booleans — can represent impossible combinations const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // What does { loading: true, error: "x", data: [...] } even mean? An invalid state. ``` Flag independen memungkinkan kombinasi yang saling bertentangan (loading *dan* error *dan* data sekaligus) yang seharusnya tidak mungkin — sumber bug UI yang membingungkan. ## Better: a status enum (a small state machine) ```js // ✅ 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 }); } } ``` Field `status` tunggal membuat status **saling eksklusif** — Anda tidak bisa dalam status loading dan error sekaligus. Render menjadi switch yang bersih: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Don't forget the often-missed states ```text 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) ``` ## The best approach for server data: use a library ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Bibliotek server-state menyediakan status ini (plus caching, refetch, stale-while-revalidate) langsung jadi — biasanya lebih baik daripada membuat sendiri. ## Mengapa ini penting Memodelkan status async dengan benar — sebagai status tunggal daripada boolean yang terpencar — menghilangkan seluruh kelas bug UI (status yang saling bertentangan, umpan balik loading/error/empty yang hilang) dan membuat logika render menjadi bersih dan lengkap. Mengenali set lengkap status (idle, loading, success, error, empty, refetching) mengarah ke UX yang lebih baik, dan mengetahui bahwa library server-state menangani semua ini adalah yang membuat kode data-fetching tetap sederhana dan kokoh.