React unmountComponentAtNode: ग्लोबल डेव्हलपर्ससाठी आवश्यक कंपोनेंट क्लीनअप आणि मेमरी मॅनेजमेंट

फ्रंट-एंड डेव्हलपमेंटच्या गतिमान जगात, विशेषतः React सारख्या शक्तिशाली लायब्ररी वापरताना, कंपोनेंट लाइफसायकल आणि प्रभावी मेमरी मॅनेजमेंट समजून घेणे अत्यंत महत्त्वाचे आहे. जागतिक प्रेक्षकांसाठी ॲप्लिकेशन्स तयार करणाऱ्या डेव्हलपर्ससाठी, कार्यक्षमता सुनिश्चित करणे आणि रिसोर्स लीक टाळणे ही केवळ एक चांगली सवय नाही; तर ती एक गरज आहे. हे साध्य करण्यासाठी एक महत्त्वाचे साधन म्हणजे React चे अनेकदा कमी लेखले जाणारे `unmountComponentAtNode` फंक्शन. हा ब्लॉग पोस्ट `unmountComponentAtNode` काय करते, कंपोनेंट क्लीनअप आणि मेमरी मॅनेजमेंटसाठी ते का महत्त्वाचे आहे, आणि जागतिक विकासाच्या आव्हानांना लक्षात घेऊन तुमच्या React ॲप्लिकेशन्समध्ये त्याचा प्रभावीपणे कसा फायदा घ्यावा यावर सखोल चर्चा करेल.

React मधील कंपोनेंट लाइफसायकल समजून घेणे

`unmountComponentAtNode` मध्ये जाण्यापूर्वी, React कंपोनेंटच्या लाइफसायकलच्या मूलभूत संकल्पना समजून घेणे आवश्यक आहे. एक React कंपोनेंट अनेक टप्प्यांतून जातो: माउंटिंग, अपडेटिंग आणि अनमाउंटिंग. प्रत्येक टप्प्यात विशिष्ट मेथड्स असतात ज्या कॉल केल्या जातात, ज्यामुळे डेव्हलपर्सना या प्रक्रियांमध्ये हस्तक्षेप करण्याची संधी मिळते.

माउंटिंग (Mounting)

या टप्प्यात कंपोनेंट तयार केला जातो आणि DOM मध्ये टाकला जातो. यात मुख्य मेथड्स खालीलप्रमाणे आहेत:

• constructor(): ही पहिली मेथड आहे जी कॉल केली जाते. स्टेट (state) सुरू करण्यासाठी आणि इव्हेंट हँडलर्सना बाइंड करण्यासाठी वापरली जाते.
• static getDerivedStateFromProps(): नवीन प्रॉप्स मिळाल्यावर रेंडरिंग करण्यापूर्वी ही मेथड कॉल केली जाते.
• render(): ही एकमेव आवश्यक मेथड आहे, जी React एलिमेंट्स परत करण्यासाठी जबाबदार असते.
• componentDidMount(): कंपोनेंट माउंट झाल्यानंतर लगेचच कॉल केली जाते. डेटा फेचिंग किंवा सबस्क्रिप्शन सेट करणे यासारख्या साइड इफेक्ट्ससाठी ही आदर्श आहे.

अपडेटिंग (Updating)

जेव्हा कंपोनेंटचे प्रॉप्स किंवा स्टेट बदलते, तेव्हा हा टप्पा येतो, ज्यामुळे री-रेंडर होते. यात मुख्य मेथड्स खालीलप्रमाणे आहेत:

• static getDerivedStateFromProps(): पुन्हा, नवीन प्रॉप्स मिळाल्यावर कॉल केली जाते.
• shouldComponentUpdate(): कंपोनेंटने री-रेंडर करावे की नाही हे ठरवते.
• render(): कंपोनेंटला पुन्हा रेंडर करते.
• getSnapshotBeforeUpdate(): DOM अपडेट होण्यापूर्वीच कॉल केली जाते, ज्यामुळे तुम्हाला DOM मधून काही माहिती (उदा. स्क्रोल पोझिशन) कॅप्चर करता येते.
• componentDidUpdate(): अपडेटिंग झाल्यानंतर लगेचच कॉल केली जाते. DOM मधील बदल किंवा अपडेटेड DOM वर अवलंबून असलेल्या साइड इफेक्ट्ससाठी उपयुक्त.

अनमाउंटिंग (Unmounting)

या टप्प्यात कंपोनेंट DOM मधून काढला जातो. येथील मुख्य मेथड आहे:

• componentWillUnmount(): कंपोनेंट अनमाउंट आणि नष्ट होण्यापूर्वीच कॉल केली जाते. क्लीनअपची कामे करण्यासाठी ही अत्यंत महत्त्वाची जागा आहे.

`unmountComponentAtNode` म्हणजे काय?

`ReactDOM.unmountComponentAtNode(container)` हे React DOM लायब्ररीद्वारे प्रदान केलेले एक फंक्शन आहे, जे तुम्हाला प्रोग्रामॅटिकली एका विशिष्ट DOM नोडमधून React कंपोनेंटला अनमाउंट करण्याची परवानगी देते. हे एकच आर्गुमेंट घेते: DOM नोड (किंवा अधिक अचूकपणे, कंटेनर एलिमेंट) जिथून React कंपोनेंट अनमाउंट करायचा आहे.

जेव्हा तुम्ही `unmountComponentAtNode` कॉल करता, तेव्हा React खालील गोष्टी करते:

1. ते विशिष्ट कंटेनरवर रूट केलेल्या React कंपोनेंट ट्रीला वेगळे करते.
2. ते अनमाउंट होत असलेल्या रूट कंपोनेंटसाठी आणि त्याच्या सर्व वंशजांसाठी `componentWillUnmount()` लाइफसायकल मेथडला ट्रिगर करते.
3. ते React कंपोनेंट आणि त्याच्या मुलांनी सेट केलेले कोणतेही इव्हेंट लिसनर्स किंवा सबस्क्रिप्शन काढून टाकते.
4. ते त्या कंटेनरमधील React द्वारे व्यवस्थापित केलेले कोणतेही DOM नोड्स साफ करते.

थोडक्यात, हे `ReactDOM.render()` च्या विरुद्ध आहे, जे DOM मध्ये React कंपोनेंट माउंट करण्यासाठी वापरले जाते.

`unmountComponentAtNode` इतके महत्त्वाचे का आहे? क्लीनअपचे महत्त्व

`unmountComponentAtNode` इतके महत्त्वाचे असण्याचे मुख्य कारण म्हणजे कंपोनेंट क्लीनअप आणि पर्यायाने मेमरी मॅनेजमेंट मध्ये त्याची भूमिका. JavaScript मध्ये, विशेषतः React सह तयार केलेल्या सिंगल-पेज ॲप्लिकेशन्स (SPAs) सारख्या दीर्घकाळ चालणाऱ्या ॲप्लिकेशन्समध्ये, मेमरी लीक्स परफॉर्मन्स आणि स्थिरतेसाठी एक छुपे शत्रू ठरू शकतात. जेव्हा यापुढे आवश्यक नसलेली मेमरी गार्बेज कलेक्टरद्वारे सोडली जात नाही, तेव्हा हे लीक्स होतात, ज्यामुळे कालांतराने मेमरीचा वापर वाढतो.

येथे काही प्रमुख परिस्थिती आहेत जिथे `unmountComponentAtNode` अपरिहार्य आहे:

१. मेमरी लीक्स प्रतिबंधित करणे

हा सर्वात महत्त्वाचा फायदा आहे. जेव्हा एक React कंपोनेंट अनमाउंट केला जातो, तेव्हा तो मेमरीमधून काढला जाणे अपेक्षित असते. तथापि, जर कंपोनेंटने कोणतेही बाह्य रिसोर्सेस किंवा लिसनर्स सेट केले असतील जे योग्यरित्या क्लीन अप केले नाहीत, तर ते रिसोर्सेस कंपोनेंट निघून गेल्यानंतरही टिकून राहू शकतात आणि मेमरी धरून ठेवू शकतात. `componentWillUnmount()` नेमके यासाठीच आहे, आणि `unmountComponentAtNode` हे सुनिश्चित करते की ही मेथड कॉल केली जाईल.

मेमरी लीक्सच्या या सामान्य स्त्रोतांचा विचार करा, जे `componentWillUnmount()` (आणि त्यामुळे `unmountComponentAtNode`) टाळण्यास मदत करते:

• इव्हेंट लिसनर्स (Event Listeners): `window`, `document`, किंवा React कंपोनेंटच्या व्यवस्थापित DOM बाहेरच्या इतर एलिमेंट्सवर थेट इव्हेंट लिसनर्स जोडल्यास, ते काढले नाहीत तर समस्या निर्माण होऊ शकतात. उदाहरणार्थ, `window.addEventListener('resize', this.handleResize)` जोडल्यास `componentWillUnmount()` मध्ये `window.removeEventListener('resize', this.handleResize)` असणे आवश्यक आहे.
• टायमर्स (Timers): `setInterval` आणि `setTimeout` कॉल्स जे क्लिअर केले नाहीत ते कार्यान्वित राहू शकतात, आणि अशा कंपोनेंट्स किंवा डेटाचा संदर्भ घेऊ शकतात जे आता अस्तित्वात नसावेत. `componentWillUnmount()` मध्ये `clearInterval()` आणि `clearTimeout()` वापरा.
• सबस्क्रिप्शन्स (Subscriptions): बाह्य डेटा स्रोत, WebSockets, किंवा ऑब्झर्वेबल स्ट्रीम्सला अनसबस्क्राइब न करता सबस्क्राइब केल्यास लीक्स होऊ शकतात.
• थर्ड-पार्टी लायब्ररीज (Third-Party Libraries): काही बाह्य लायब्ररीज लिसनर्स जोडू शकतात किंवा DOM एलिमेंट्स तयार करू शकतात ज्यांना स्पष्ट क्लीनअपची आवश्यकता असते.

अनमाउंट होत असलेल्या ट्री मधील सर्व कंपोनेंट्ससाठी `componentWillUnmount` कार्यान्वित होईल याची खात्री करून, `unmountComponentAtNode` हे लटकलेले संदर्भ आणि लिसनर्स काढून टाकण्यास मदत करते, ज्यामुळे मेमरी मोकळी होते.

२. डायनॅमिक रेंडरिंग आणि ॲप्लिकेशन स्टेट

अनेक आधुनिक वेब ॲप्लिकेशन्समध्ये, वापरकर्त्याच्या कृती, राउटिंग बदल किंवा डायनॅमिक कंटेंट लोडिंगवर आधारित कंपोनेंट्स वारंवार माउंट आणि अनमाउंट केले जातात. उदाहरणार्थ, जेव्हा एखादा वापरकर्ता सिंगल-पेज ॲप्लिकेशन (SPA) मध्ये एका पेजवरून दुसऱ्या पेजवर जातो, तेव्हा नवीन कंपोनेंट्ससाठी जागा तयार करण्यासाठी मागील पेजचे कंपोनेंट्स अनमाउंट करणे आवश्यक असते.

जर तुम्ही तुमच्या ॲप्लिकेशनचे कोणते भाग React द्वारे रेंडर करायचे हे स्वतः व्यवस्थापित करत असाल (उदा. एकाच पेजवर वेगवेगळ्या कंटेनरमध्ये वेगवेगळे React ॲप्स रेंडर करणे, किंवा पूर्णपणे वेगळे React ट्रीज कंडिशनली रेंडर करणे), तर `unmountComponentAtNode` हे त्या ट्रीजची गरज नसताना काढून टाकण्याची यंत्रणा आहे.

३. एकाधिक React रूट्स हाताळणे

संपूर्ण ॲप्लिकेशनसाठी एकच रूट React कंपोनेंट असणे सामान्य असले तरी, काही परिस्थितींमध्ये, विशेषतः मोठ्या, अधिक जटिल सिस्टीममध्ये किंवा React ला विद्यमान नॉन-React ॲप्लिकेशन्समध्ये समाकलित करताना, तुमच्याकडे एकाच पेजवर वेगवेगळ्या कंटेनर्सद्वारे व्यवस्थापित केलेले अनेक, स्वतंत्र React रूट्स असू शकतात.

जेव्हा तुम्हाला यापैकी एखादे स्वतंत्र React ॲप्लिकेशन किंवा React द्वारे व्यवस्थापित केलेला विशिष्ट विभाग काढून टाकायचा असतो, तेव्हा `unmountComponentAtNode` हे अचूक साधन आहे. ते तुम्हाला एका विशिष्ट DOM नोडला लक्ष्य करण्याची आणि फक्त त्याच्याशी संबंधित React ट्री अनमाउंट करण्याची परवानगी देते, पेजच्या इतर भागांना (इतर React ॲप्लिकेशन्ससह) स्पर्श न करता.

४. हॉट मॉड्यूल रिप्लेसमेंट (HMR) आणि डेव्हलपमेंट

डेव्हलपमेंट दरम्यान, Webpack च्या हॉट मॉड्यूल रिप्लेसमेंट (HMR) सारखी साधने पूर्ण पेज रिफ्रेश न करता वारंवार कंपोनेंट्स री-रेंडर करतात. HMR सामान्यतः अनमाउंटिंग आणि रीमाउंटिंग प्रक्रिया कार्यक्षमतेने हाताळत असले तरी, `unmountComponentAtNode` समजून घेणे अशा परिस्थितीत डीबग करण्यास मदत करते जिथे HMR अनपेक्षितपणे वागू शकते किंवा कस्टम डेव्हलपमेंट साधने तयार करताना.

`unmountComponentAtNode` कसे वापरावे

याचा वापर सरळ आहे. तुम्हाला DOM नोडचा (कंटेनरचा) संदर्भ हवा आहे जिथे तुमचा React कंपोनेंट पूर्वी `ReactDOM.render()` वापरून माउंट केला होता.

साधे उदाहरण

चला एका सोप्या उदाहरणाने स्पष्ट करूया. समजा तुमच्याकडे `MyComponent` नावाचा एक React कंपोनेंट आहे आणि तुम्ही तो `app-container` आयडी असलेल्या `div` मध्ये रेंडर करता.

१. कंपोनेंट रेंडर करणे:

index.js (किंवा तुमची मुख्य एंट्री फाइल):

            import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

const container = document.getElementById('app-container');
ReactDOM.render(<MyComponent />, container);

            

              
                Copy
              
            
          

२. कंपोनेंट अनमाउंट करणे:

काही वेळानंतर, कदाचित बटणावर क्लिक केल्यावर किंवा रूट बदलल्यावर, तुम्ही तो अनमाउंट करू शकता:

someOtherFile.js किंवा तुमच्या ॲप्लिकेशनमधील इव्हेंट हँडलर:

            import ReactDOM from 'react-dom';

const containerToUnmount = document.getElementById('app-container');
if (containerToUnmount) {
  ReactDOM.unmountComponentAtNode(containerToUnmount);
  console.log('MyComponent has been unmounted.');
}

            

              
                Copy
              
            
          

टीप: `unmountComponentAtNode` कॉल करण्यापूर्वी `containerToUnmount` अस्तित्वात आहे की नाही हे तपासणे एक चांगली सवय आहे, जेणेकरून जर एलिमेंट इतर कोणत्याही मार्गाने DOM मधून काढून टाकला गेला असेल तर त्रुटी टाळता येतील.

कंडिशनल रेंडरिंगसह `unmountComponentAtNode` वापरणे

`unmountComponentAtNode` थेट वापरता येत असले तरी, बहुतेक आधुनिक React ॲप्लिकेशन्समध्ये, तुमच्या मुख्य `App` कंपोनेंटमधील कंडिशनल रेंडरिंग किंवा राउटिंग लायब्ररीज (जसे की React Router) कंपोनेंट अनमाउंटिंग आपोआप हाताळतात. तथापि, `unmountComponentAtNode` समजून घेणे तेव्हा महत्त्वाचे ठरते जेव्हा:

• तुम्ही एक कस्टम कंपोनेंट तयार करत आहात ज्याला इतर React ॲप्लिकेशन्स किंवा विजेट्स DOM मध्ये डायनॅमिकली जोडण्याची/काढण्याची आवश्यकता आहे.
• तुम्ही React ला लेगसी ॲप्लिकेशनमध्ये समाकलित करत आहात जिथे तुमच्याकडे स्वतंत्र React इन्स्टन्स होस्ट करणारे अनेक भिन्न DOM एलिमेंट्स असू शकतात.

चला एक अशी परिस्थिती कल्पना करूया जिथे तुमच्याकडे एक डॅशबोर्ड ॲप्लिकेशन आहे, आणि काही विजेट्स विशिष्ट कंटेनर एलिमेंट्समध्ये स्वतंत्र React ॲप्स म्हणून डायनॅमिकली लोड केले जातात.

उदाहरण: डायनॅमिक विजेट्ससह एक डॅशबोर्ड

समजा तुमचे HTML असे दिसते:

            <div id="dashboard-root"></div>
<div id="widget-area"></div>

            

              
                Copy
              
            
          

आणि तुमचे मुख्य ॲप्लिकेशन `dashboard-root` मध्ये माउंट होते.

App.js:

            import React, { useState } from 'react';
import WidgetLoader from './WidgetLoader';

function App() {
  const [showWidget, setShowWidget] = useState(false);

  return (
    <div>
      <h1>Main Dashboard</h1>
      <button onClick={() => setShowWidget(true)}>Load Widget</button>
      <button onClick={() => setShowWidget(false)}>Unload Widget</button>
      {showWidget && <WidgetLoader />}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

WidgetLoader.js (हा कंपोनेंट दुसऱ्या React ॲपला माउंट/अनमाउंट करण्यासाठी जबाबदार आहे):

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import DynamicWidget from './DynamicWidget';

// A simple widget component
function DynamicWidget() {
  useEffect(() => {
    console.log('DynamicWidget mounted!');
    // Example: Setting up a global event listener that needs cleanup
    const handleGlobalClick = () => {
      console.log('Global click detected!');
    };
    window.addEventListener('click', handleGlobalClick);

    // Cleanup function via componentWillUnmount equivalent (useEffect return)
    return () => {
      console.log('DynamicWidget componentWillUnmount cleanup called!');
      window.removeEventListener('click', handleGlobalClick);
    };
  }, []);

  return (
    <div style={{ border: '2px solid blue', padding: '10px', marginTop: '10px' }}>
      <h2>This is a Dynamic Widget</h2>
      <p>It's a separate React instance.</p>
    </div>
  );
}

// Component that manages mounting/unmounting the widget
function WidgetLoader() {
  useEffect(() => {
    const widgetContainer = document.getElementById('widget-area');
    if (widgetContainer) {
      // Mount the DynamicWidget into its dedicated container
      ReactDOM.render(<DynamicWidget />, widgetContainer);
    }

    // Cleanup: Unmount the widget when WidgetLoader unmounts
    return () => {
      if (widgetContainer) {
        console.log('Unmounting DynamicWidget from widget-area...');
        ReactDOM.unmountComponentAtNode(widgetContainer);
      }
    };
  }, []); // Run only on mount and unmount of WidgetLoader

  return null; // WidgetLoader itself doesn't render anything, it manages its child
}

export default WidgetLoader;

            

              
                Copy
              
            
          

या उदाहरणात:

• `App` हे `WidgetLoader` ची दृश्यमानता नियंत्रित करते.
• `WidgetLoader` हे `DynamicWidget` ला एका विशिष्ट DOM नोड (`widget-area`) मध्ये माउंट करण्यासाठी जबाबदार आहे.
• सर्वात महत्त्वाचे म्हणजे, `WidgetLoader` चा `useEffect` हुक एक क्लीनअप फंक्शन परत करतो. हे क्लीनअप फंक्शन `ReactDOM.unmountComponentAtNode(widgetContainer)` कॉल करते. हे सुनिश्चित करते की जेव्हा `WidgetLoader` अनमाउंट होतो (कारण `showWidget` हे `false` होते), तेव्हा `DynamicWidget` आणि त्याचे संबंधित इव्हेंट लिसनर्स (जसे की ग्लोबल `window.click` लिसनर) योग्यरित्या क्लीन अप केले जातात.

हे पॅटर्न दाखवते की `unmountComponentAtNode` चा वापर एका मोठ्या पेजमध्ये स्वतंत्रपणे रेंडर केलेल्या React ॲप्लिकेशन किंवा विजेटच्या लाइफसायकलचे व्यवस्थापन करण्यासाठी कसा केला जातो.

जागतिक विचार आणि सर्वोत्तम पद्धती

जागतिक प्रेक्षकांसाठी ॲप्लिकेशन्स विकसित करताना, विविध प्रदेशांमधील बदलत्या नेटवर्क परिस्थिती, डिव्हाइस क्षमता आणि वापरकर्त्यांच्या अपेक्षांमुळे परफॉर्मन्स आणि रिसोर्स मॅनेजमेंट आणखी महत्त्वाचे बनते.

१. परफॉर्मन्स ऑप्टिमायझेशन

न वापरलेले कंपोनेंट्स नियमितपणे अनमाउंट केल्याने तुमचे ॲप्लिकेशन अनावश्यक DOM नोड्स किंवा पार्श्वभूमी प्रक्रिया जमा करत नाही हे सुनिश्चित होते. हे विशेषतः कमी शक्तिशाली डिव्हाइसेस किंवा धीम्या इंटरनेट कनेक्शन असलेल्या वापरकर्त्यांसाठी महत्त्वाचे आहे. एक सुव्यवस्थित, चांगल्या प्रकारे व्यवस्थापित केलेला कंपोनेंट ट्री वापरकर्त्याच्या स्थानाची पर्वा न करता जलद, अधिक प्रतिसाद देणारा वापरकर्ता अनुभव देतो.

२. क्रॉस-ग्लोबल हस्तक्षेप टाळणे

ज्या परिस्थितीत तुम्ही एकाच पेजवर अनेक React इन्स्टन्स किंवा विजेट्स चालवत असाल, कदाचित A/B टेस्टिंगसाठी किंवा विविध थर्ड-पार्टी React-आधारित साधने समाकलित करण्यासाठी, माउंटिंग आणि अनमाउंटिंगवर अचूक नियंत्रण महत्त्वाचे आहे. `unmountComponentAtNode` तुम्हाला या इन्स्टन्सना वेगळे करण्याची परवानगी देते, ज्यामुळे ते एकमेकांच्या DOM किंवा इव्हेंट हँडलिंगमध्ये हस्तक्षेप करण्यापासून रोखतात, ज्यामुळे जगभरातील वापरकर्त्यांसाठी अनपेक्षित वर्तन होऊ शकते.

३. आंतरराष्ट्रीयीकरण (i18n) आणि स्थानिकीकरण (l10n)

`unmountComponentAtNode` च्या मूळ कार्याशी थेट संबंधित नसले तरी, लक्षात ठेवा की प्रभावी i18n आणि l10n धोरणांनी कंपोनेंट लाइफसायकलचा देखील विचार केला पाहिजे. जर तुमचे कंपोनेंट्स डायनॅमिकली भाषा पॅक लोड करत असतील किंवा स्थानानुसार UI समायोजित करत असतील, तर मेमरी लीक्स किंवा जुना डेटा टाळण्यासाठी अनमाउंट करताना या ऑपरेशन्स देखील योग्यरित्या क्लीन अप केल्या गेल्या आहेत याची खात्री करा.

४. कोड स्प्लिटिंग आणि लेझी लोडिंग

आधुनिक React ॲप्लिकेशन्स अनेकदा कोड स्प्लिटिंगचा वापर करतात जेणेकरून कंपोनेंट्स फक्त आवश्यकतेनुसार लोड केले जातील. जेव्हा एखादा वापरकर्ता तुमच्या ॲपच्या नवीन विभागात जातो, तेव्हा त्या विभागासाठी कोड फेच केला जातो आणि कंपोनेंट्स माउंट केले जातात. त्याचप्रमाणे, जेव्हा ते दूर जातात, तेव्हा हे कंपोनेंट्स अनमाउंट केले पाहिजेत. `unmountComponentAtNode` पूर्वी लोड केलेले, आता न वापरलेले, कोड बंडल्स आणि त्यांचे संबंधित कंपोनेंट्स मेमरीमधून योग्यरित्या साफ केले जातील याची खात्री करण्यात भूमिका बजावते.

५. क्लीनअपमध्ये सुसंगतता

तुम्ही क्लीनअप कसे हाताळता यात सुसंगतता ठेवण्याचा प्रयत्न करा. जर तुम्ही `ReactDOM.render` वापरून एखाद्या विशिष्ट DOM नोडमध्ये React कंपोनेंट माउंट करत असाल, तर जेव्हा त्याची गरज नसेल तेव्हा `ReactDOM.unmountComponentAtNode` वापरून तो अनमाउंट करण्याची संबंधित योजना नेहमी तयार ठेवा. क्लीनअपसाठी केवळ `window.location.reload()` किंवा पूर्ण पेज रिफ्रेशवर अवलंबून राहणे आधुनिक SPAs मध्ये एक अँटी-पॅटर्न आहे.

केव्हा जास्त काळजी करू नये (किंवा React कशी मदत करते)

हे लक्षात घेणे महत्त्वाचे आहे की बहुतेक सामान्य React ॲप्लिकेशन्ससाठी जे एंट्री पॉईंटवर एकाच `ReactDOM.render()` कॉलद्वारे व्यवस्थापित केले जातात (उदा., `index.js` जे `