Bagaimanakah anda memodelkan keadaan async/loading?

Question

Accepted Answer

Operasi asinkron (panggilan API) memiliki beberapa hasil yang mungkin, jadi anda harus memodelkan **lebih daripada hanya data** — anda perlu mewakilkan keadaan loading, success, dan error. Memodelkan ini dengan baik mencegah bug UI seperti menampilkan data usang atau tidak ada feedback. ## Pendekatan naif dan kelemahannya ```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 bertentangan (loading *dan* error *dan* data secara bersamaan) yang seharusnya mustahil — sumber bug UI yang membingungkan. ## Lebih baik: enum status (mesin keadaan kecil) ```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 }); } } ``` Satu field `status` membuat keadaan **saling eksklusif** — anda tidak bisa loading dan error pada waktu bersamaan. Rendering menjadi switch yang bersih: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Jangan lupakan keadaan yang sering terlewatkan ```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) ``` ## Pendekatan terbaik untuk data server: gunakan perpustakaan ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Perpustakaan server-state menyediakan keadaan ini (plus caching, refetch, stale-while-revalidate) secara langsung — biasanya lebih baik daripada mengimplementasikan sendiri. ## Mengapa penting Memodelkan keadaan async dengan benar — sebagai status tunggal daripada boolean yang terserak — menghilangkan seluruh kelas bug UI (keadaan yang bertentangan, feedback loading/error/empty yang hilang) dan membuat logika rendering bersih dan lengkap. Mengenali set lengkap keadaan (idle, loading, success, error, empty, refetching) mengarah pada UX yang lebih baik, dan mengetahui bahwa perpustakaan server-state menangani semua ini adalah apa yang membuat kode data-fetching tetap sederhana dan robust.