Loading और Error States
Loading और error states आपके data के लिए traffic lights जैसे हैं — green का मतलब यह ready है, yellow का मतलब wait करें, और red का मतलब कुछ गलत हुआ।
In this page:
Syntax
const [status, setStatus] = useState("loading"); // loading | error | success
if (status === "loading") return <p>Loading...</p>;
if (status === "error") return <button onClick={retry}>Try again</button>;
return <DataView data={data} />;एक Data Request के तीन States
कोई भी data-fetching UI को generally तीन distinct situations represent करने की ज़रूरत होती है: अभी response का wait कर रहे (loading), request fail हो गई (error), और response successfully आ गया (success, actual data दिखाने के लिए)।
शुरू में सभी तीनों के लिए design करना एक ऐसे UI से बचाता है जो real-world network conditions में broken दिखे।
Note:
कोई भी fetching code लिखने से पहले sketch करें कि इन तीनों states में से हर एक कैसा दिखना चाहिए — यह clear करता है कि आपको actually कौन से state variables चाहिए।
Warning:
सिर्फ success case के लिए design करना मतलब users को loading के दौरान एक blank या frozen screen दिखती है, या एक request fail होने पर कुछ भी नहीं।
उदाहरण: The Three States of a Data Request
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [status] = React.useState("loading");
if (status === "loading") return <p>Loading...</p>;
if (status === "error") return <p>Something went wrong.</p>;
return <p>Data loaded successfully!</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Multiple Booleans के बजाय एक Status String उपयोग करना
isLoading और isError को दो separate booleans के रूप में track करना nonsensical combinations allow करता है, जैसे दोनों का एक साथ true होना। Distinct string values (idle, loading, error, success) वाला एक single status field किसी भी समय सिर्फ एक state ही represent कर सकता है, जो reality का एक ज़्यादा accurate model है।
Note:
इस pattern को कभी-कभी एक 'state machine' कहा जाता है — किसी भी समय सिर्फ एक named state active होती है।
Warning:
दो independent booleans समय के साथ out of sync drift हो सकते हैं जैसे ज़्यादा code paths जोड़े जाते हैं, silently impossible combinations बनाते हुए।
उदाहरण: Using One Status String Instead of Multiple Booleans
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [status, setStatus] = React.useState("idle");
const startLoading = () => setStatus("loading");
return (
<div>
<button onClick={startLoading}>Load Data</button>
<p>Status: {status}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Error State को एक Retry Option देना
एक अच्छा error state सिर्फ 'कुछ गलत हुआ' नहीं कहता — यह try again करने का एक तरीका देता है, जैसे एक Retry button जो original fetch logic फिर से चलाए और status को वापस loading पर reset करे।
Note:
Fetching logic को अपने अलग function में extract करें ताकि initial load और Retry button दोनों exact same code call कर सकें।
Warning:
एक error message जिसमें recover करने का कोई तरीका न हो (एक full page refresh के अलावा) users के लिए एक frustrating dead end है।
उदाहरण: Giving the Error State a Retry Option
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [status, setStatus] = React.useState("error");
const retry = () => setStatus("loading");
if (status === "error") return <div><p>Failed to load.</p><button onClick={retry}>Retry</button></div>;
return <p>Status: {status}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- सिर्फ success case handle करना और यह design करना भूल जाना कि loading के दौरान या error के बाद UI कैसा दिखता है।
- तीन possible states के लिए एक single boolean उपयोग करना, 'loading AND error एक साथ' को representable बनाते हुए जब ऐसा नहीं होना चाहिए।
- एक नया request शुरू होने पर error state reset न करना, retry के दौरान एक stale error visible छोड़ते हुए।
चैप्टर सारांश
- एक data-fetching component में typically तीन states होते हैं: loading, error, और success (data के साथ)।
- एक single status string (idle/loading/error/success) उपयोग करना उन invalid state combinations से बचाता है जो separate booleans allow करते हैं।
- हर state की अपनी distinct UI होनी चाहिए: एक spinner/message, retry option वाला एक error message, और actual content।
- एक नए request की शुरुआत में error/loading state reset करना retries के दौरान UI को accurate रखता है।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — useState और conditional rendering से बना।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: