तपाई async/loading state लाई कसरी मडेल गर्नुहुन्छ?

Question

Accepted Answer

Asynchronous operations (API calls) का कई सम्भावित परिणाम हुन्छन्, त्यसैले तपाईले **डेटा मात्र भन्दा बढी** मडेल गर्नुपर्छ — तपाईले loading, success, र error states को प्रतिनिधित्व गर्न आवश्यक छ। यसलाई राम्रोसँग मडेल गर्नुले UI bugs जस्तै stale data वा कुनै feedback नदेखाएको बिषयबाट बचाउँछ। ## Naive approach र यसको कमजोरीहरू ```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 ले विरोधपूर्ण संयोजनहरू (loading *र* error *र* data एकै पल) अनुमति दिन्छ जो असम्भव हुनुपर्छ — confusing UI bugs को स्रोत। ## राम्रो: एक status enum (एक सानो 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` field ले states लाई **mutually exclusive** बनाउँछ — तपाई loading र errored दुवै हुन सक्नुहुन्न। Rendering एक सफा switch बन्छ: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## अक्सर छोडिएका 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) ``` ## Server data को लागि सबैभन्दा राम्रो approach: एक library प्रयोग गर्नुहोस् ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Server-state libraries ले यी states (साथै caching, refetch, stale-while-revalidate) box मा प्रदान गर्छन् — सामान्यतया hand-rolling भन्दा राम्रो। ## यो किन महत्त्वपूर्ण छ Async state लाई सही तरिकाले मडेल गर्नु — एकल status को रूपमा loose booleans को सट्टामा — UI bugs को एक पूरै वर्गलाई हटाउँछ (विरोधपूर्ण states, छोडिएका loading/error/empty feedback) र rendering logic लाई सफा र exhaustive बनाउँछ। States को पूरै सेट (idle, loading, success, error, empty, refetching) को पहिचान गर्नुले राम्रो UX को नेतृत्व गर्छ, र जानकार कि server-state libraries यो सबै संभाल्छ भनेर यो data-fetching code लाई सरल र robust राखेको कुरा हो।