Form Submission और Loading States
Loading states के साथ form submission handle करना 'please wait' का sign दिखाने जैसा है जब आपका order cook हो रहा हो, ताकि आपको पता हो यह असल में process हो रहा है।
In this page:
Syntax
const [submitting, setSubmitting] = useState(false);
async function handleSubmit(e) {
e.preventDefault();
setSubmitting(true);
try {
// await the submission
} finally {
setSubmitting(false);
}
}
<button disabled={submitting}>Submit</button>Submission State Track करना
एक boolean state जैसे submitting track करता है कि form currently process हो रहा है या नहीं। Submission शुरू होते ही इसे true set करना, और खत्म होने पर वापस false करना, UI को उस window के दौरान एक loading indicator दिखाने और button disable करने देता है।
Note:
इसे isSubmitting या submitting नाम दें ताकि इसका purpose JSX conditions में एक नज़र में obvious हो।
Warning:
अगर आप request खत्म होने के बाद submitting को वापस false set करना भूल जाएं, तो button हमेशा के लिए disabled रह जाता है।
उदाहरण: Tracking Submission State
<!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 [submitting, setSubmitting] = React.useState(false);
const handleSubmit = e => {
e.preventDefault();
setSubmitting(true);
setTimeout(() => setSubmitting(false), 1000);
};
return <form onSubmit={handleSubmit}><button disabled={submitting}>{submitting ? "Submitting..." : "Submit"}</button></form>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Success और Error Outcomes Handle करना
एक असली submission succeed या fail हो सकता है, इसलिए loading flag के अलावा एक result state (जैसे idle, success, या error) track करना useful है। यह UI को request खत्म होने पर सही message दिखाने देता है, सिर्फ चुपचाप reset होने के बजाय।
Note:
Result state को वापस idle पर reset करें जब user पिछले error के बाद form को फिर से edit करना शुरू करे।
Warning:
User के form फिर से बदल देने के बाद एक stale success message दिखाना confusing हो सकता है — इसे new input पर clear करें।
उदाहरण: Handling Success and Error Outcomes
<!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 handleSubmit = e => {
e.preventDefault();
setStatus("submitting");
setTimeout(() => setStatus("success"), 800);
};
return (
<form onSubmit={handleSubmit}>
<button disabled={status === "submitting"}>Submit</button>
{status === "success" && <p>Saved successfully!</p>}
</form>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Reliable Cleanup के लिए try/catch/finally उपयोग करना
Async submission logic को try/catch/finally में wrap करना गारंटी देता है कि loading state reset होती है जो भी हो — चाहे request succeed हो, error throw करे, या network fail हो जाए।
Finally block हमेशा run होता है, इसे loading flag off करने की सबसे safe जगह बनाते हुए।
Note:
setSubmitting(false) को finally में रखें, try और catch दोनों में duplicate किए बिना, repeat करने से बचने के लिए।
Warning:
finally के बिना, success के setSubmitting(false) line तक पहुंचने से पहले throw हुआ एक error button को हमेशा के लिए disabled छोड़ देता है।
उदाहरण: Using try/catch/finally for Reliable Cleanup
<!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 [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState("");
const handleSubmit = async e => {
e.preventDefault();
setSubmitting(true);
try { throw new Error("Simulated failure"); }
catch (err) { setError(err.message); }
finally { setSubmitting(false); }
};
return <form onSubmit={handleSubmit}><button disabled={submitting}>Submit</button>{error && <p>{error}</p>}</form>;
}
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. #}
आम गलतियां
- Submission progress में होते हुए submit button disable न करना, duplicate submits allow करते हुए।
- catch block में loading state reset करना भूल जाना, एक error के बाद button हमेशा के लिए disabled stuck छोड़ते हुए।
- Submission खत्म होने के बाद कोई success या error feedback न दिखाना।
चैप्टर सारांश
- एक submitting state (boolean) track करता है कि एक form request currently in flight है या नहीं।
- Submit button को submitting के दौरान disabled होना चाहिए duplicate submissions रोकने के लिए।
- try/catch/finally गारंटी देता है कि loading state reset होती है चाहे submission succeed या fail हो।
- अलग success और error messages दिखाना user को outcome पर clear feedback देता है।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — standard async/await और useState पर बना है।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: