React StrictMode क्या है
In this page:
<React.StrictMode>
<App />
</React.StrictMode>StrictMode क्या करता है
अपनी app के एक हिस्से को <React.StrictMode> में wrap करना extra development-only checks और warnings enable करता है, जिसमें कुछ functions (component bodies जैसे) को intentionally double-invoke करना शामिल है unsafe side effects से bugs surface करने में help करने के लिए।
उदाहरण: What StrictMode Does
<!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 StrictNote() {
return <p>Wrap the app root in <React.StrictMode> to enable extra dev checks.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<StrictNote />
</React.StrictMode>
);
</script>
</body>
</html>StrictMode क्या पकड़ने में Help करता है
StrictMode उन components को surface करने में help करता है जिनके side effects properly cleaned up नहीं हैं, deprecated API usage, और दूसरे patterns जो concurrent rendering जैसे future React features के under टूट सकते हैं।
उदाहरण: What StrictMode Helps 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 EffectNote() {
React.useEffect(() => {
console.log('Effect ran -- StrictMode intentionally runs this twice in dev');
}, []);
return <p>Check the console for the double-run in development.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<EffectNote />
</React.StrictMode>
);
</script>
</body>
</html>अपनी App में StrictMode Enable करना
StrictMode अपने component tree के किसी भी हिस्से को एक <React.StrictMode> element में wrap करके enabled होता है। इसका खुद का कोई visible UI नहीं है -- यह सिर्फ इसके अंदर nested components के लिए extra development-time checks activate करता है।
आप अपनी पूरी app को wrap कर सकते हैं, या सिर्फ वह section जिसे आप check करना चाहते हैं।
उदाहरण: Enabling StrictMode in Your App
<!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 Greeting() {
return <p>Hello from a StrictMode-wrapped component!</p>;
}
function App() {
return (
<React.StrictMode>
<Greeting />
</React.StrictMode>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Development में components दो बार render होने पर confused होना -- वह StrictMode intentionally side effects check कर रहा है, कोई bug नहीं।
- यह मान लेना कि StrictMode production build को affect करता है -- यह सिर्फ development में अपने extra checks run करता है।
- सिर्फ app के एक हिस्से को wrap करना और दूसरे parts को वही warnings न मिलने पर surprised होना।
<React.StrictMode>अपने child components के लिए extra development-only checks enable करता है।- इसका कोई visual output नहीं है और यह rendered UI को affect नहीं करता।
- यह unsafe lifecycle usage और unexpected side effects को early catch करने में help करता है।
- सभी checks production builds में automatically disabled हैं।
कोई browser-specific restrictions नहीं -- React 16.3 से available; development-mode only।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: