Piye carane sampeyan model state async/loading?

Question

Accepted Answer

Operasi asinkron (panggilan API) nduweni pirang-pirang asil sing bisa ditindakake, dadi sampeyan kudu model **luwih akeh tinimbang data wae** — sampeyan kudu nganggo loading, success, lan error states. Ngmodelnukake iki kanthi apik nyegah UI bugs kaya nampilake data lawas utawa ora ana feedback. ## Pendekatan naif lan cacade ```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 ngidini kombinasi sing saling bertentangan (loading *lan* error *lan* data bebarengan) sing kudu mustahil — sumber saka UI bugs sing membingungkan. ## Luwih apik: enum status (mesin state cilik) ```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 nggawe state **saling eksklusif** — sampeyan ora bisa loading lan error bebarengan. Rendering dadi switch sing resik: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Aja lali state sing sering keliruan ```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 paling apik kanggo data server: gunakake perpustakaan ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Perpustakaan server-state nyediake state iki (plus caching, refetch, stale-while-revalidate) sing wis built-in — biasane luwih apik tinimbang nggawe dhewe. ## Kenapa penting Ngmodelnukake async state kanthi bener — minangka status tunggal tinimbang boolean renggang — ngilangi kabeh kelas saka UI bugs (state sing kontradiktif, loading/error/empty feedback sing kurang) lan nggawe rendering logic resik lan lengkap. Ngenali set lengkap state (idle, loading, success, error, empty, refetching) menehi UX sing luwih apik, lan weruh yen perpustakaan server-state ngatasi kabeh iki iku sing njaga data-fetching code tetep simple lan robust.