आप 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 की ओर जाता है, और यह जानना कि सर्वर-स्थिति लाइब्रेरी यह सब संभालती हैं, वह है जो डेटा-फेचिंग कोड को सरल और मजबूत रखता है।