ਤੁਸੀ async/loading state ਨੂੰ ਕਿਵੇਂ ਮਾਡਲ ਕਰਦੇ ਹੋ?

Question

Accepted Answer

ਅਸਿੰਕਰੋਨਸ ਓਪਰੇਸ਼ਨ (API ਕਾਲ) ਦੇ ਕਈ ਸੰਭਾਵੀ ਨਤੀਜੇ ਹੁੰਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ **ਸਿਰਫ ਡੇਟਾ ਨਾਲੋਂ ਵਧੀਕ** ਮਾਡਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ — ਤੁਹਾਨੂੰ loading, success, ਅਤੇ error states ਨੂੰ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾ ਮਾਡਲ ਕਰਨਾ UI bugs ਨੂੰ ਰੋਕਦਾ ਹੈ ਜਿਵੇਂ stale data ਨੂੰ ਦਿਖਾਉਣਾ ਜਾਂ ਕੋਈ ਫੀਡਬੈਕ ਨਾ ਹੋਣਾ। ## 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 ਵਿਰੋਧਾਭਾਸੀ ਸੰਜੋਗਾਂ (loading *ਅਤੇ* error *ਅਤੇ* data ਇਕੋ ਸਮੇਂ) ਨੂੰ ਮਨਜੂਰੀ ਦਿੰਦੇ ਹਨ ਜੋ ਅਸੰਭਵ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ — ਉਲਝਾਣ ਵਾਲੇ UI bugs ਦਾ ਸਰੋਤ। ## 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` ਫੀਲਡ states ਨੂੰ **ਆਪਸੀ ਤੌਰ ਤੇ ਐਕਸਕਲੂਸਿਵ** ਬਣਾਉਂਦਾ ਹੈ — ਤੁਸੀ loading ਅਤੇ errored ਦੋਵੇਂ ਨਹੀਂ ਹੋ ਸਕਦੇ। Rendering ਇੱਕ ਸਾਫ switch ਬਣ ਜਾਂਦਾ ਹੈ: ```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 }); ``` Server-state libraries ਇਹਨਾਂ states (ਇਸ ਤੋਂ ਇਲਾਵਾ caching, refetch, stale-while-revalidate) ਨੂੰ out of the box ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ — ਆਮ ਤੌਰ ਤੇ ਹਥੱਲੀ ਨਾਲ ਬਣਾਉਣਨਾਲੋਂ ਬਿਹਤਰ। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Async state ਨੂੰ ਸਹੀ ਤਰ੍ਹਾ ਮਾਡਲ ਕਰਨਾ — ਢਿੱਲੇ booleans ਦੀ ਬਜਾਏ ਇੱਕ ਸਿੰਗਲ status ਵਜੋਂ — UI bugs ਦੀ ਇੱਕ ਪੂਰੀ ਕਲਾਸ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ (ਵਿਰੋਧਾਭਾਸੀ states, ਗਾਇਬ loading/error/empty feedback) ਅਤੇ rendering logic ਨੂੰ ਸਾਫ ਅਤੇ ਮੁਕੰਮਲ ਬਣਾਉਂਦਾ ਹੈ। States ਦੇ ਪੂਰੇ ਸੈੱਟ (idle, loading, success, error, empty, refetching) ਨੂੰ ਪਛਾਣਨਾ ਬਿਹਤਰ UX ਵੱਲ ਲੈ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਹ ਜਾਣਨਾ ਕਿ server-state libraries ਇਹ ਸਭ ਕੁਝ ਸੂਚਾਰਦਾ ਹੈ ਉਹ ਹੈ ਜੋ data-fetching code ਨੂੰ ਸਾਧਾਰਨ ਅਤੇ ਮਜ਼ਬੂਤ ਰੱਖਦਾ ਹੈ।