असिंक्रोनस ऑपरेशन (API कॉल) के कई संभावित परिणाम होते हैं, इसलिए आपको सिर्फ डेटा से अधिक मॉडल करना चाहिए — आपको loading, success, और error स्थितियों का प्रतिनिधित्व करना चाहिए। इसे अच्छी तरह से मॉडल करना UI बग से बचाता है जैसे stale डेटा दिखाना या कोई feedback न देना।
[data, setData] = ();
[loading, setLoading] = ();
[error, setError] = ();
स्वतंत्र flags विरोधाभासी संयोजनों की अनुमति देते हैं (एक साथ loading और error और data) जो असंभव होना चाहिए — यह भ्रामक UI बग का स्रोत है।
// ✅ 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 field स्थितियों को परस्पर अनन्य बनाता है — आप एक साथ loading और error में नहीं हो सकते। Rendering एक स्वच्छ switch बन जाता है:
switch (state.status) {
case "loading": return <Spinner />;
case "error": return <Error message={state.error} />;
case "success": return <List data={state.data} />;
default: return <Idle />;
}
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)
// React Query / SWR model all of this for you
const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn });
Server-state libraries ये states (plus caching, refetch, stale-while-revalidate) तुरंत प्रदान करती हैं — आमतौर पर hand-rolling से बेहतर है।
Async state को सही तरीके से मॉडल करना — एक single status के रूप में loose booleans के बजाय — UI bugs का एक पूरा class हटा देता है (विरोधाभासी स्थितियां, missing loading/error/empty feedback) और rendering logic को clean और exhaustive बनाता है।
स्थितियों का पूरा set (idle, loading, success, error, empty, refetching) पहचानना बेहतर UX की ओर ले जाता है, और यह जानना कि server-state libraries यह सब handle करती हैं, यही है जो data-fetching code को सरल और robust रखता है।