అసమకాలీన ఆపరేషన్లు (API కాల్లు) బహుళ సంభావ్య ఫలితాలను కలిగి ఉన్నాయి, కాబట్టి మీరు డేటా మాత్రమే కాకుండా మోడల్ చేయాలి — మీరు లోడింగ్, సక్సెస్ మరియు ఎర్రర్ స్థితులను ప్రతిపాదించాలి. సరైన మోడలింగ్ UI బగ్లను నిరోధిస్తుంది, అంటే పాత డేటాను చూపించడం లేదా ఫీడ్బ్యాక్ లేకపోవడం.
[data, setData] = ();
[loading, setLoading] = ();
[error, setError] = ();
స్వతంత్ర ఫ్లాగ్లు విరుద్ధ సంయోగాలను (లోడింగ్ మరియు ఎర్రర్ మరియు డేటా ఏకకాలంలో) అనుమతిస్తాయి, ఇవి అసాధ్యమైనవిగా ఉండాలి — గందరగోళమైన 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 ఫీల్డ్ స్థితులను పరస్పర ఎక్సక్లూసివ్ చేస్తుంది — మీరు లోడింగ్ మరియు ఎర్రర్ రెండూ ఉండలేరు. రెండరింగ్ స్వచ్ఛమైన స్విచ్ అవుతుంది:
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 });
సర్వర్-స్టేట్ లైబ్రరీలు ఈ స్థితులను (కాషింగ్, రీఫెచ్, stale-while-revalidate) ఔట్బాక్స్లో సరఫరా చేస్తాయి — సాధారణంగా హ్యాండ్-రోలింగ్ కంటే చక్కగా ఉండటం.
ేषას్ స్థితిని సరిగ్గా మోడల్ చేయడం — ఒకే స్థితిగా, సరళ బూలియన్ల కంటే — UI బగ్ల మొత్తం తరగతిని తొలగిస్తుంది (విరుద్ధ స్థితులు, లోడింగ్/ఎర్రర్/ఖాళీ ఫీడ్బ్యాక్ లేనివి) మరియు రెండరింగ్ లాజిక్ను స్చ్ఛమైనదిగా మరియు సమ్మతమైనదిగా చేస్తుంది.
స్థితుల పూర్ణ సెట్ను (idle, లోడింగ్, సక్సెస్, ఎర్రర్, ఖాళీ, రీఫెచింగ్) గుర్తిస్తే మంచి UX కి దారితీస్తుంది, మరియు సర్వర్-స్టేట్ లైబ్రరీలు ఈ విషయాన్ని సంభాలించాయని తెలుసుకోవడం డేటా-ఫెచింగ్ కోడ్ను సరళ మరియు బలమైనదిగా ఉంచుతుంది.