Kif timbassew l-istat async/loading?

Question

Accepted Answer

Operazzjoniet asinkroni (sejħat API) għandhom diversi riżultati possibbli, għalhekk trid timbassa **aktar minn biss id-data** — trid tirrappreżenta stati ta' loading, success, u error. Ibassew dan b'mod tajjeb jipprevieni bug UI bħal turi data stali jew l-ebda feedback. ## L-approċċ naive u l-istatellimenti tiegħu ```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. ``` Bandieri indipendenti jippermettu kombinazzjoniet kontradittorji (loading *u* error *u* data simultanjament) li għandhom ikunu impossibbli — sors ta' bug UI ta' konfużjoni. ## Aħjar: status enum (magħina ta' stat żgħira) ```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 }); } } ``` Kamp `status` wieħed jagħmel l-istati **mutwalenx esklussivi** — int ma tistax ikun loading u error fl-istess ħin. Ir-rendering isir switch nadif: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Tistax tinsew l-istati li spiss jonqsu ```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) ``` ## L-aħjar approċċ għad-data tas-server: uża librerija ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Librerarizz tas-server-state jipprovdu dawn l-istati (plus caching, refetch, stale-while-revalidate) mir-risk — ġeneralment aħjar milli tuqgħalek. ## Għaliex huwa importanti Imbassew l-istat async b'mod korrett — bħala status wieħed minflok booleans imxerrda — ineħħi klassi sħiħa ta' bug UI (istati kontradittorji, feedback loading/error/empty li jonqsu) u jagħmel il-loġika ta' rendering nadif u exhaustiv. Il-għarfien tas-sett kompletu ta' stati (idle, loading, success, error, empty, refetching) iwassal għal UX aħjar, u l-għarfien li libbrerarizz tas-server-state tħaddmu dan kollox huwa dak li iżomm il-kodiċi ta' data-fetching sempliċi u robust.