useEffect के अंदर async/await
In this page:
useEffect(() => {
async function loadData() {
try {
const response = await fetch(url);
const data = await response.json();
setData(data);
} catch (error) {
setError(error);
}
}
loadData();
}, [url]);useEffect का Callback Directly async क्यों नहीं हो सकता
useEffect अपने callback से यह expect करता है कि वह कुछ न return करे, या एक cleanup function return करे। एक async function हमेशा एक Promise return करता है, जिसे React एक valid cleanup function के रूप में interpret नहीं कर सकता, इसलिए effect callback को खुद async बनाना एक warning trigger करता है और सही से काम नहीं करता।
उदाहरण: Why useEffect's Callback Can't Be async Directly
<!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 [data, setData] = React.useState(null);
React.useEffect(() => {
async function load() {
const result = "Loaded via inner async function";
setData(result);
}
load();
}, []);
return <p>{data || "Loading..."}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>try/catch से Errors Handle करना
चूंकि inner async function await उपयोग करता है, awaited calls को try/catch में wrap करना आपको rejected promises (जैसे एक failed fetch) को उसी जगह handle करने देता है, एक error state set करते हुए जो component display कर सके, rejection को unnoticed disappear होने देने के बजाय।
उदाहरण: Handling Errors with try/catch
<!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 [error, setError] = React.useState(null);
React.useEffect(() => {
async function load() {
try {
throw new Error("Simulated failure");
} catch (err) {
setError(err.message);
}
}
load();
}, []);
return <p style={{color: "red"}}>{error || "No errors"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Unmount के बाद Updates से Guard करना
अगर एक slow async call finish होने से पहले component unmount हो जाए, तो बाद में setState call करना एक React warning log करता है। एक boolean flag, जो effect के cleanup function में true set होता है, async function को state update करने से पहले यह check करने देता है कि अब भी ऐसा करना safe है या नहीं।
उदाहरण: Guarding Against Updates After Unmount
<!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 [data, setData] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
async function load() {
const result = "Safely loaded";
if (!cancelled) setData(result);
}
load();
return () => { cancelled = true; };
}, []);
return <p>{data || "Loading..."}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- useEffect callback को खुद async बनाना, जिसे React support नहीं करता — callback को void या एक cleanup function return करना चाहिए, कोई Promise नहीं।
- एक slow async call के दौरान component unmount होने पर state set करने से guard करना भूल जाना।
- Awaited promise के rejected case को handle न करना, errors को silently disappear होने देते हुए।
- useEffect का callback function directly async declare नहीं किया जा सकता — React इससे void या एक cleanup function return करने की expectation रखता है।
- Standard workaround है effect के INSIDE एक async function define करना और इसे immediately call करना।
- Awaited calls के around try/catch उन errors को handle करता है जिन्हें एक plain .then() chain silently drop कर सकती है।
- एक cancelled flag component unmount होने के बाद state update करने से guard करता है।
async/await और useEffect दोनों broadly supported हैं (ES2017+ syntax, React 16.8+ Hooks)।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: