آپ async/loading state کو کیسے ماڈل کرتے ہیں؟

Question

Accepted Answer

ہم وقت سے متعلق operations (API calls) کے متعدد ممکنہ نتائج ہوتے ہیں، اس لیے آپ کو **صرف ڈیٹا سے زیادہ** ماڈل کرنا ہوگا — آپ کو loading، success، اور error states کی نمائندگی کرنی ہوگی۔ اس کو اچھی طرح ماڈل کرنا UI bugs سے بچاتا ہے جیسے پرانا ڈیٹا یا کوئی 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 متضاد combinations کی اجازت دیتے ہیں (loading *اور* error *اور* data ایک ساتھ) جو ناممکن ہونی چاہیے — یہ الجھن والے 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 کو **باہم مختص** بناتی ہے — آپ loading اور errored دونوں نہیں ہو سکتے۔ Rendering ایک صاف switch بن جاتا ہے: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## اکثر 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) ``` ## 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) باہر نکلتے ہوئے فراہم کرتی ہیں — عام طور پر hand-rolling سے بہتر۔ ## یہ کیوں اہم ہے Async state کو صحیح طریقے سے ماڈل کرنا — ایک single status کے طور پر بجائے loose booleans کے — UI bugs کی ایک پوری قسم کو ختم کرتا ہے (متضاد states، missing loading/error/empty feedback) اور rendering logic کو صاف اور جامع بناتا ہے۔ states کے مکمل set کو پہچاننا (idle، loading، success، error، empty، refetching) بہتر UX کی طرف جاتا ہے، اور یہ جاننا کہ server-state libraries یہ سب سنبھالتی ہیں وہی ہے جو data-fetching code کو سادہ اور مضبوط رکھتا ہے۔