Πώς μοντελοποιείς async/loading state;

Question

Accepted Answer

Οι ασύγχρονες λειτουργίες (API calls) έχουν πολλαπλά πιθανά αποτελέσματα, επομένως πρέπει να μοντελοποιήσεις **περισσότερα από απλώς τα δεδομένα** — χρειάζεται να αναπαραστήσεις loading, success, και error states. Η καλή μοντελοποίηση αποτρέπει UI bugs όπως η εμφάνιση παλιών δεδομένων ή η έλλειψη feedback. ## Η αφελής προσέγγιση και τα προβλήματά της ```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. ``` Οι ανεξάρτητες σημαίες επιτρέπουν αντιφατικούς συνδυασμούς (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 ; } ``` ## Μην ξεχνάς τις συχνά παραβλεπόμενες 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: χρησιμοποίησε μια βιβλιοθήκη ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Οι server-state βιβλιοθήκες παρέχουν αυτές τις states (συν caching, refetch, stale-while-revalidate) out of the box — συνήθως καλύτερα από hand-rolling. ## Γιατί σημαίνει Η σωστή μοντελοποίηση async state — ως ενιαίο status αντί για loose booleans — εξαλείφει ολόκληρη μια κατηγορία UI bugs (αντιφατικές states, missing loading/error/empty feedback) και κάνει την rendering logic καθαρή και εξαντλητική. Το να αναγνωρίζεις το πλήρες σύνολο states (idle, loading, success, error, empty, refetching) οδηγεί σε καλύτερη UX, και το γεγονός ότι οι server-state βιβλιοθήκες χειρίζονται όλα αυτά είναι αυτό που κρατά τον data-fetching code απλό και ισχυρό.