તમે async/loading state ને કેવી રીતે મોડેલ કરો છો?

Question

Accepted Answer

એસિંક્રોનસ ઓપરેશન્સ (API કોલ્સ)ના બહુવિધ સંભવિત પરિણામો હોય છે, તેથી તમે **ફક્ત ડેટા કરતાં વધુ** મોડેલ કરવું જોઈએ — તમે લોડિંગ, સફળતા અને ભૂલ સ્થિતિઓ રજૂ કરવી જોઈએ. આને સારી રીતે મોડેલ કરવાથી પુરાણી ડેટા દેખાડવા અથવા કોઈ પ્રતિક્રિયા ન મળવા જેવી UI બગ્સ અટકાવવામાં આવે છે. ## 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. ``` સ્વતંત્ર flags વિરોધાભાસી સંયોજનો (એક જ સમયે લોડિંગ *અને* ભૂલ *અને* ડેટા)ને મંજૂરી આપે છે જે અશક્ય હોવા જોઈએ — મૂંઝવણજનક UI બગ્સનો સ્રોત. ## 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 }); } } ``` વધુ વિસ્તૃત `status` ફીલ્ડ સ્થિતિઓને **પરસ્પર વિશિષ્ટ** બનાવે છે — તમે લોડિંગ અને ભૂલ બંને હોઈ શકતા નથી. રેન્ડરિંગ સ્વચ્છ સ્વીચ બને છે: ```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 }); ``` સર્વર-સ્ટેટ લાઇબ્રેરીઓ આ સ્થિતિઓ (વધુમાં caching, refetch, stale-while-revalidate) બોક્સની બહાર પ્રદાન કરે છે — સામાન્યત: હાથથી રોલ કરવાથી વધુ સારું. ## તે શા માટે મહત્વપૂર્ણ છે એસિંક સ્થિતિને સાચી રીતે મોડેલ કરવું — ढીલા booleans ને બદલે એક જ status તરીકે — UI બગ્સનો આખો વર્ગ દૂર કરે છે (વિરોધાભાસી સ્થિતિઓ, લોડિંગ/ભૂલ/ખાલી પ્રતિક્રિયા ખૂટી છે) અને રેન્ડરિંગ તર્ક સ્વચ્છ અને સંપૂર્ણ બનાવે છે. સ્થિતિઓનો સંપૂર્ણ સમૂહ (idle, loading, success, error, empty, refetching) ઓળખવો વધુ સારું UX તરફ દોરી જાય છે, અને એ જાણવું કે સર્વર-સ્ટેટ લાઇબ્રેરીઓ આ બધું સંભાળે છે તે છે જે ડેટા-ફેચિંગ કોડને સરળ અને મજબૂત રાખે છે.