React Academy · पाठ

StrictMode क्या करता है

डेवलपमेंट में दोहरे आह्वान और अप्रचलित API चेतावनियाँ समझें

पाठ 1, कुल 4 में से13 चरण

StrictMode क्या करता है, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप जानेंगे कि React.StrictMode डेवलपमेंट में क्या करता है, यह कौन-सी चेतावनियाँ दिखाता है और सुरक्षित React कोड लिखने में कैसे मदद करता है।

StrictMode क्या है

StrictMode एक विशेष React कंपोनेंट है जो आपके ट्री के किसी हिस्से को घेरता है और **केवल डेवलपमेंट में** अतिरिक्त जाँच सक्षम करता है। प्रोडक्शन बिल्ड पर इसका कोई प्रभाव नहीं पड़ता।
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

लाइफ़साइकल का दोहरा आह्वान

सख्त मोड में React डेवलपमेंट के दौरान आपके कंपोनेंट फ़ंक्शन और कुछ लाइफ़साइकल विधियों को जानबूझकर **दो बार** कॉल करता है। इसका उद्देश्य उन साइड इफ़ेक्ट को उजागर करना है जिनकी उचित सफ़ाई नहीं हुई है।

दो बार आह्वान क्यों

React 18 और उसके बाद के संस्करण भविष्य में कंपोनेंट को फिर से माउंट कर सकते हैं (जैसे फ़ास्ट-रिफ़्रेश और ऑफ़स्क्रीन एपीआई के लिए)। डेवलपमेंट में दो बार आह्वान करना इसका अनुकरण करता है, जिससे आपको ऐसे बग पकड़ने में मदद मिलती है जैसे बार-बार जुड़ते सब्सक्रिप्शन या दो बार चलने वाले DOM बदलाव।

इफ़ेक्ट का माउंट–अनमाउंट–रीमाउंट

React 18 में StrictMode के साथ, शुरुआती माउंट पर हर useEffect चलता है, उसकी सफ़ाई होती है और वह फिर चलता है। यदि आपका सफ़ाई फ़ंक्शन सही है, तो दो बार चलना हानिरहित है। यदि आपका ऐप टूटता है, तो सफ़ाई अनुपस्थित या गलत है।
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

अप्रचलित एपीआई का पता लगाना

जब आपका कोड `componentWillMount`, `componentWillReceiveProps` और स्ट्रिंग रेफ़रेंस जैसे अप्रचलित React एपीआई का उपयोग करता है, तब StrictMode चेतावनी देता है। ये चेतावनियाँ ब्राउज़र कंसोल में पीली चेतावनियों के रूप में दिखाई देती हैं।

विरासत कॉन्टेक्स्ट एपीआई की चेतावनी

यदि कोई तृतीय-पक्ष लाइब्रेरी विरासत कॉन्टेक्स्ट एपीआई (`childContextTypes` / `getChildContext`) का उपयोग करती है, तो StrictMode चेतावनी देगा। इसका संकेत है कि लाइब्रेरी को आधुनिक `React.createContext` एपीआई में अपडेट करने की आवश्यकता है।

मौजूदा ऐप में सुरक्षित रूप से सक्षम करें

आप किसी मौजूदा ऐप में StrictMode को धीरे-धीरे सक्षम करने के लिए अपने कंपोनेंट ट्री के केवल एक हिस्से को इससे घेर सकते हैं। नए अनुभागों से शुरू करें और चेतावनियाँ ठीक करते हुए इसका विस्तार करें।
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

कोई दृश्य अंतर नहीं

StrictMode कोई दिखाई देने वाला यूआई रेंडर नहीं करता। यह पूरी तरह डेवलपमेंट टूल है। आपको DOM में कोई अतिरिक्त एलिमेंट दिखाई नहीं देंगे — केवल अतिरिक्त कंसोल चेतावनियाँ और दोहरे आह्वान का व्यवहार दिखाई देगा।

पहले दिन से सक्षम करें

सबसे अच्छी पद्धति है कि किसी प्रोजेक्ट की शुरुआत से ही StrictMode सक्षम करें। दोहरे आह्वान से जुड़ी समस्याओं को शुरुआत में ठीक करना बाद में, बड़े कोडबेस में उन्हें खोजने की तुलना में बहुत आसान होता है।

त्वरित जाँच

कंपोनेंट फ़ंक्शन के React StrictMode द्वारा किए जाने वाले दोहरे आह्वान का उद्देश्य क्या है?

पुनरावलोकन

StrictMode एक बिना अतिरिक्त लागत वाला डेवलपमेंट टूल है जो अशुद्ध कोड पकड़ने के लिए रेंडर और इफ़ेक्ट का दोहरा आह्वान करता है, अप्रचलित एपीआई के बारे में चेतावनी देता है और आपके ऐप को भविष्य की React सुविधाओं के लिए तैयार करता है।

अगला पाठ

अगला पाठ: **शुद्ध कंपोनेंट और रेंडर में साइड इफ़ेक्ट से बचना** — आप ऐसे रेंडर फ़ंक्शन लिखना सीखेंगे जिनमें बदलाव और बाहरी रीड नहीं होते।
शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “StrictMode क्या करता है” पाठ निःशुल्क है?

हाँ—“StrictMode क्या करता है” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“StrictMode क्या करता है” में मैं क्या सीखूँगा?

डेवलपमेंट में दोहरे आह्वान और अप्रचलित API चेतावनियाँ समझें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“StrictMode क्या करता है” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. StrictMode क्या करता है
  2. शुद्ध घटक और रेंडर में साइड इफ़ेक्ट से बचाव
  3. Key और Ref के सर्वोत्तम अभ्यास
  4. फ़ोल्डर संरचना और नामकरण परंपराएँ
← React Academy पर वापस जाएँ