Kina za ka yin kwatanta matsalolinku/jihar kawa?

Question

Accepted Answer

Ayyukan Asynchronous (kiran API) suna da yuwuwar sakamakon da yawa, don haka kuna bukatar gida **fiye da bayanai kaɗai** — kana bukatar wakilta jihar kawa, nasara, da daidaitaccen jiya. Yin wannan sosai yana hana kutewar UI kamar nuni da tsofaffar bayanai ko babu izini. ## 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. ``` Albarkacin banzi suna hayar haɗin gida masu saba (kawa *da* kuskure *da* bayanai a jiya gida) wanda yakamata zai kasance iya — tushen ruɗa UI mai rudani. ## 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 }); } } ``` Filin `status` guda daya yana sa jiyoyin **tsaye gida tsakanin juna** — ba za ka iya kasua jihar kawa da kuskure ba a lokaci gida. Sake jiya ta zama dabam da santsi: ```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 }); ``` Gidajen gwajin server suna samar da waɗannan jiyoyin (da kari, sake jiya, kusan-yayin-amanar) sanin jiya — yawanci mafi kyau fiye da hannu-yin. ## Yasa ya zama muhimmi Mukamala jiyar asynchronous daidai — a matsayin status guda daya akan saita boolean — yana ɗar sasu gida na kutewar UI (jiyoyin saba, babu izini na kawa/kuskure/wofi) da yana sa jiya ta sake jiya santsi da cikakke. Sanin cikakken jigon jiyoyin (sakaye, kawa, nasara, kuskure, wofi, sake jiya) yana haifar da mafi kyau UX, da sanin cewa gwajin gwajin server suna hannu duka wannan shine wanda ke riƙe bayanai-faro code saukaka da ƙarfi.