React StrictMode: ஒரு வலுவான மேம்பாட்டு சூழலைத் திறத்தல்

React StrictMode என்பது டெவலப்பர்கள் தங்கள் React செயலிகளில் ஏற்படக்கூடிய சிக்கல்களைக் கண்டறிய உதவும் ஒரு சக்திவாய்ந்த கருவியாகும். StrictMode-ஐ இயக்குவதன் மூலம், உங்கள் குறியீட்டின் தரத்தையும் பராமரிப்பையும் மேம்படுத்தக்கூடிய கூடுதல் சோதனைகள் மற்றும் எச்சரிக்கைகளை நீங்கள் செயல்படுத்துகிறீர்கள். இது பிழைகளைப் பிடிப்பது மட்டுமல்ல; இது சிறந்த நடைமுறைகளைச் செயல்படுத்தி, எதிர்கால React புதுப்பிப்புகளுக்கு உங்கள் செயலியைத் தயார்படுத்துவதாகும். StrictMode என்பது ஒரு மேம்பாட்டு-மட்டும் அம்சமாகும், அதாவது இது உங்கள் உற்பத்தி செயலியின் செயல்திறனை பாதிக்காது.

React StrictMode என்றால் என்ன?

StrictMode என்பது React-ல் உள்ள ஒரு பிரத்யேக மேம்பாட்டு பயன்முறையாகும், இது ஒரு செயலியில் உள்ள சாத்தியமான சிக்கல்களை எடுத்துக்காட்டுகிறது. இது அதன் துணை கூறுகளுக்கு கூடுதல் சோதனைகள் மற்றும் எச்சரிக்கைகளை செயல்படுத்துகிறது. இந்த சோதனைகள் நீங்கள் சிறந்த கூறுகளை எழுதவும் பொதுவான தவறுகளைத் தவிர்க்கவும் உதவுகின்றன.

StrictMode-ன் முக்கிய அம்சங்கள்:

• பாதுகாப்பற்ற வாழ்க்கைச் சுழற்சி முறைகளைக் கண்டறிகிறது: குறிப்பாக ஒத்திசைவற்ற சூழ்நிலைகளில் சிக்கல்களை ஏற்படுத்தக்கூடிய பழைய வாழ்க்கைச் சுழற்சி முறைகளைப் பயன்படுத்துவது குறித்து StrictMode எச்சரிக்கிறது.
• பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-களின் பயன்பாடு பற்றி எச்சரிக்கிறது: நீங்கள் பயன்படுத்தக்கூடிய எந்தவொரு பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-களையும் StrictMode எடுத்துக்காட்டுகிறது, புதிய, நிலையான மாற்றுகளுக்கு மாற உங்களை ஊக்குவிக்கிறது.
• எதிர்பாராத பக்க விளைவுகளைக் கண்டறிகிறது: React கூறுகள் சிறந்த முறையில் தூய செயல்பாடுகளைப் போல செயல்பட வேண்டும், அதாவது அவற்றுக்கு எந்த பக்க விளைவுகளும் இருக்கக்கூடாது. உங்கள் செயலியின் நிலையை பாதிக்கக்கூடிய எதிர்பாராத பக்க விளைவுகளைக் கண்டறிய StrictMode உங்களுக்கு உதவும்.
• Context API-க்கு கடுமையான விதிகளை அமல்படுத்துகிறது: StrictMode, Context API-ன் பயன்பாட்டிற்கு கடுமையான விதிகளை வழங்குகிறது, நீங்கள் அதை சரியாகவும் திறமையாகவும் பயன்படுத்துவதை உறுதி செய்கிறது.
• எதிர்பாராத மாற்றங்களைச் சரிபார்க்கிறது: தரவை நீங்கள் கவனக்குறைவாக நேரடியாக மாற்றும் நிகழ்வுகளைப் பிடிக்க StrictMode உங்களுக்கு உதவும், இது கணிக்க முடியாத நடத்தை மற்றும் பிழைத்திருத்தம் செய்ய கடினமான சிக்கல்களுக்கு வழிவகுக்கும்.

React StrictMode-ஐ ஏன் பயன்படுத்த வேண்டும்?

React StrictMode-ஐப் பயன்படுத்துவது டெவலப்பர்களுக்கு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

• மேம்படுத்தப்பட்ட குறியீட்டுத் தரம்: சிறந்த நடைமுறைகளைச் செயல்படுத்தி, மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே சாத்தியமான சிக்கல்களை எடுத்துக்காட்டுவதன் மூலம் தூய்மையான, பராமரிக்கக்கூடிய குறியீட்டை எழுத StrictMode உங்களுக்கு உதவுகிறது.
• ஆரம்பத்திலேயே பிழை கண்டறிதல்: சாத்தியமான சிக்கல்களை ஆரம்பத்திலேயே கண்டறிவதன் மூலம், பிழைத்திருத்தத்தில் உங்கள் மதிப்புமிக்க நேரத்தையும் முயற்சியையும் StrictMode சேமிக்க முடியும்.
• உங்கள் செயலியை எதிர்காலத்திற்குத் தயார்படுத்துதல்: பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-கள் மற்றும் பாதுகாப்பற்ற வாழ்க்கைச் சுழற்சி முறைகளிலிருந்து விலகிச் செல்ல உங்களை ஊக்குவிப்பதன் மூலம், எதிர்கால React புதுப்பிப்புகளுக்கு உங்கள் செயலியைத் தயார்படுத்த StrictMode உதவுகிறது.
• மேம்பட்ட செயல்திறன்: StrictMode நேரடியாக செயல்திறனை மேம்படுத்தவில்லை என்றாலும், திறனற்ற குறியீடு அல்லது எதிர்பாராத பக்க விளைவுகளால் ஏற்படும் செயல்திறன் தடைகளைக் கண்டறிய இது உங்களுக்கு உதவும்.
• React கொள்கைகளைப் பற்றிய சிறந்த புரிதல்: StrictMode-ஐப் பயன்படுத்துவது உங்கள் கூறுகள் ஒன்றுக்கொன்று மற்றும் செயலியின் ஒட்டுமொத்த நிலையுடன் எவ்வாறு தொடர்பு கொள்கின்றன என்பதைப் பற்றி கவனமாக சிந்திக்க உங்களைத் தூண்டுகிறது, இது React கொள்கைகளைப் பற்றிய ஆழமான புரிதலுக்கு வழிவகுக்கிறது.

லண்டன், டோக்கியோ மற்றும் நியூயார்க்கில் உள்ள டெவலப்பர்களுடன், பல நேர மண்டலங்களில் பரவியிருக்கும் ஒரு மேம்பாட்டுக் குழுவைக் கவனியுங்கள். ஆரம்பத்திலிருந்தே StrictMode-ஐ செயல்படுத்துவது, ஒரு டெவலப்பரால் எழுதப்பட்ட குறியீடு சிறந்த நடைமுறைகளுடன் ஒத்துப்போவதை உறுதிசெய்கிறது, டெவலப்பரின் இருப்பிடம் அல்லது அனுபவ அளவைப் பொருட்படுத்தாமல், மேம்பாட்டு சுழற்சியில் பின்னர் ஏற்படக்கூடிய முரண்பாடுகள் மற்றும் பிழைத்திருத்த முயற்சிகளைக் குறைக்கிறது.

React StrictMode-ஐ இயக்குவது எப்படி

StrictMode-ஐ இயக்குவது எளிது. உங்கள் செயலியின் எந்தப் பகுதியையும் <React.StrictMode> கூறில் நீங்கள் சுற்றலாம். இது குறிப்பிட்ட கூறுகளுக்கு அல்லது முழு செயலிக்கும் StrictMode-ஐத் தேர்ந்தெடுத்துப் பயன்படுத்த உங்களை அனுமதிக்கிறது.

முழு செயலிக்கும் StrictMode-ஐ இயக்குதல்

முழு செயலிக்கும் StrictMode-ஐ இயக்க, ரூட் கூறினை <React.StrictMode> உடன் சுற்றவும்:

            import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

            

              
                Copy
              
            
          

ஒரு குறிப்பிட்ட கூறுக்கு StrictMode-ஐ இயக்குதல்

ஒரு குறிப்பிட்ட கூறுக்கு StrictMode-ஐ இயக்க, அந்தக் கூறினை <React.StrictMode> உடன் சுற்றவும்:

            import React from 'react';

function MyComponent() {
  return (
    <React.StrictMode>
      <div>
        {/* Component content */}
      </div>
    </React.StrictMode>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

இந்தத் தேர்ந்தெடுத்த பயன்பாடு, சாத்தியமான சிக்கல்கள் இருப்பதாக நீங்கள் சந்தேகிக்கும் உங்கள் செயலியின் குறிப்பிட்ட பகுதிகளில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது. பெரிய குறியீட்டுத் தளங்களுக்கு அல்லது பழைய குறியீட்டை React-க்கு மாற்றும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

StrictMode மூலம் கண்டறியப்பட்ட பொதுவான சிக்கல்கள்

StrictMode பல்வேறு சிக்கல்களைக் கண்டறிய உதவுகிறது, உங்கள் React செயலிகளின் ஒட்டுமொத்த தரத்தை மேம்படுத்துகிறது. StrictMode அடையாளம் காணக்கூடிய சில பொதுவான சிக்கல்கள் இங்கே:

பாதுகாப்பற்ற வாழ்க்கைச் சுழற்சி முறைகள்

சில பழைய வாழ்க்கைச் சுழற்சி முறைகள் பாதுகாப்பற்றதாகக் கருதப்படுகின்றன, மேலும் அவை எதிர்பாராத நடத்தைக்கு வழிவகுக்கும், குறிப்பாக ஒத்திசைவற்ற சூழல்களில். StrictMode பின்வரும் முறைகளின் பயன்பாடு குறித்து எச்சரிக்கிறது:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

இந்த முறைகள் பெரும்பாலும் தவறாகப் பயன்படுத்தப்படுகின்றன, இது சாத்தியமான பிழைகள் மற்றும் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கிறது. componentDidMount, getDerivedStateFromProps, மற்றும் shouldComponentUpdate போன்ற பாதுகாப்பான மாற்றுகளுக்கு மாற StrictMode டெவலப்பர்களை ஊக்குவிக்கிறது.

உதாரணமாக, ஒரு ஈ-காமர்ஸ் செயலி componentWillMount-ல் தயாரிப்பு விவரங்களைப் பெறுவதைக் கவனியுங்கள். API அழைப்பு மெதுவாக இருந்தால், கூறு ஆரம்பத்தில் முழுமையற்ற தரவுகளுடன் ரெண்டர் ஆகலாம். StrictMode இதைக் கொடியிடுகிறது, ஆரம்ப ரெண்டருக்குப் பிறகு தரவுப் பெறுதல் நடைபெறுவதை உறுதிசெய்ய `componentDidMount`-ஐப் பயன்படுத்தும்படி உங்களைத் தூண்டுகிறது, இது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது.

பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-கள்

பயன்பாட்டிலிருந்து நீக்கப்பட்ட React API-களின் பயன்பாடு குறித்து StrictMode எச்சரிக்கிறது. பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-கள் என்பவை இனிமேலும் பயன்பாட்டிற்குப் பரிந்துரைக்கப்படாத அம்சங்களாகும், மேலும் அவை React-ன் எதிர்கால பதிப்புகளில் அகற்றப்படலாம். பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-களைப் பயன்படுத்துவது இணக்கத்தன்மை சிக்கல்கள் மற்றும் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

இந்தப் பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-களைக் கண்டறிந்து, அவற்றின் பரிந்துரைக்கப்பட்ட மாற்றுகளுடன் மாற்றுவதற்கு StrictMode உங்களுக்கு உதவுகிறது, உங்கள் செயலி எதிர்கால React புதுப்பிப்புகளுடன் இணக்கமாக இருப்பதை உறுதி செய்கிறது.

ஒரு உதாரணம் `findDOMNode`-ன் பயன்பாடு, இது இப்போது ஊக்கப்படுத்தப்படவில்லை. StrictMode இதை எடுத்துக்காட்டும், டெவலப்பர்களை அதற்கு பதிலாக React refs-ஐப் பயன்படுத்த ஊக்குவிக்கும், இது மேலும் கணிக்கக்கூடிய கூறு நடத்தைக்கு வழிவகுக்கிறது.

எதிர்பாராத பக்க விளைவுகள்

React கூறுகள் சிறந்த முறையில் தூய செயல்பாடுகளைப் போல செயல்பட வேண்டும், அதாவது அவற்றுக்கு எந்த பக்க விளைவுகளும் இருக்கக்கூடாது. பக்க விளைவுகள் என்பது கூறுகளின் எல்லைக்கு வெளியே நிலையை மாற்றும் செயல்களாகும், அதாவது DOM-ஐ நேரடியாக மாற்றுவது அல்லது ரெண்டரிங் செயல்முறையின் போது API அழைப்புகளைச் செய்வது போன்றவை.

சில செயல்பாடுகளை இரண்டு முறை அழைப்பதன் மூலம் எதிர்பாராத பக்க விளைவுகளைக் கண்டறிய StrictMode உங்களுக்கு உதவுகிறது. இந்த இரட்டிப்பு, உடனடியாகத் தெளிவாகத் தெரியாத சாத்தியமான பக்க விளைவுகளை வெளிப்படுத்துகிறது. ஒரு செயல்பாட்டிற்கு பக்க விளைவுகள் இருந்தால், அதை இரண்டு முறை அழைப்பது பெரும்பாலும் வெவ்வேறு முடிவுகளை உருவாக்கும், இது சிக்கலைப் பற்றி உங்களை எச்சரிக்கிறது.

உதாரணமாக, ரெண்டரிங்கின் போது ஒரு குளோபல் கவுண்டரைப் புதுப்பிக்கும் ஒரு கூறு StrictMode மூலம் கொடியிடப்படும். இரட்டை அழைப்பு கவுண்டர் இரண்டு முறை அதிகரிக்க வழிவகுக்கும், பக்க விளைவை வெளிப்படுத்தும். இது கவுண்டர் புதுப்பிப்பை ஒரு பொருத்தமான வாழ்க்கைச் சுழற்சி முறை அல்லது நிகழ்வு கையாளுபவருக்கு நகர்த்த உங்களை கட்டாயப்படுத்துகிறது.

பழைய String Ref API

React-ன் பழைய பதிப்புகள் refs-க்கு ஒரு string-அடிப்படையிலான API-ஐ ஆதரித்தன. இந்த அணுகுமுறை இப்போது பழமையானதாகக் கருதப்படுகிறது மற்றும் சிக்கல்களுக்கு வழிவகுக்கும், குறிப்பாக மிகவும் சிக்கலான செயலிகளில்.

StrictMode string refs-ஐப் பயன்படுத்துவதற்கு எதிராக எச்சரிக்கிறது மற்றும் டெவலப்பர்களை மிகவும் நவீன மற்றும் நெகிழ்வான callback ref அல்லது React.createRef API-ஐப் பயன்படுத்த ஊக்குவிக்கிறது.

callback refs (எ.கா., `ref={el => this.inputElement = el}`) அல்லது `React.createRef()`-ஐப் பயன்படுத்துவது, கூறு மவுண்டிங் மற்றும் அன்மவுண்டிங்கின் போது ref சரியாக இணைக்கப்பட்டு பிரிக்கப்படுவதை உறுதி செய்கிறது, சாத்தியமான நினைவக கசிவுகள் மற்றும் எதிர்பாராத நடத்தையைத் தடுக்கிறது.

பாதுகாப்பற்ற Context பயன்பாட்டைக் கண்டறிதல்

Context API, ஒவ்வொரு மட்டத்திலும் props-களைக் கைமுறையாக அனுப்ப வேண்டிய அவசியமின்றி கூறுகளுக்கு இடையில் தரவைப் பகிர்ந்து கொள்ள ஒரு வழியை வழங்குகிறது. இருப்பினும், Context API-ன் தவறான பயன்பாடு செயல்திறன் சிக்கல்கள் மற்றும் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

StrictMode, Context API-ன் பயன்பாட்டிற்கு கடுமையான விதிகளைச் செயல்படுத்துகிறது, சாத்தியமான சிக்கல்களை ஆரம்பத்திலேயே கண்டறிய உதவுகிறது. இது context மதிப்புகள் சரியாகப் புதுப்பிக்கப்படுவதையும், context மதிப்பு மாறும்போது கூறுகள் தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்யப்படாமல் இருப்பதையும் உறுதி செய்வதை உள்ளடக்குகிறது.

ஒரு கூறு சரியாக வழங்கப்படாத அல்லது புதுப்பிக்கப்படாத context மதிப்புகளைச் சார்ந்திருக்கும் சூழ்நிலைகளைக் கண்டறியவும் StrictMode உதவுகிறது. இந்தச் சிக்கல்களைக் கண்டறிவதன் மூலம், உங்கள் செயலி Context API-ஐச் சரியாகவும் திறமையாகவும் பயன்படுத்துவதை உறுதிசெய்ய StrictMode உதவுகிறது.

React StrictMode-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

React StrictMode-ன் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• StrictMode-ஐ ஆரம்பத்தில் இயக்குங்கள்: உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் StrictMode-ஐ எவ்வளவு சீக்கிரம் முடியுமோ அவ்வளவு சீக்கிரம் ஒருங்கிணைக்கவும். இது மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே சாத்தியமான சிக்கல்களைப் பிடிக்க உங்களை அனுமதிக்கிறது, அவற்றைச் சரிசெய்வதை எளிதாகவும் குறைந்த செலவிலும் ஆக்குகிறது.
• எச்சரிக்கைகளை உடனடியாகக் கவனியுங்கள்: StrictMode எச்சரிக்கைகளைப் புறக்கணிக்காதீர்கள். அவற்றை உங்கள் குறியீட்டில் உள்ள சாத்தியமான சிக்கல்களின் முக்கிய குறிகாட்டிகளாகக் கருதுங்கள். உங்கள் செயலி நிலையானதாகவும் பராமரிக்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய எச்சரிக்கைகளை உடனடியாக நிவர்த்தி செய்யவும்.
• StrictMode-ஐத் தேர்ந்தெடுத்துப் பயன்படுத்துங்கள்: நீங்கள் முழு செயலிக்கும் ஒரே நேரத்தில் StrictMode-ஐ இயக்க வேண்டியதில்லை. சிக்கல்கள் இருக்கலாம் என்று நீங்கள் சந்தேகிக்கும் குறிப்பிட்ட கூறுகள் அல்லது தொகுதிகளுக்கு அதை இயக்குவதன் மூலம் தொடங்கவும். நீங்கள் எச்சரிக்கைகளைக் கையாண்டு உங்கள் குறியீட்டை மறுசீரமைக்கும்போது படிப்படியாக StrictMode-ன் நோக்கத்தை விரிவாக்குங்கள்.
• எச்சரிக்கைகளைப் புரிந்து கொள்ளுங்கள்: ஒவ்வொரு StrictMode எச்சரிக்கையின் அர்த்தத்தைப் புரிந்துகொள்ள நேரம் ஒதுக்குங்கள். அடிப்படைப் சிக்கலைப் புரிந்து கொள்ளாமல் எச்சரிக்கையைச் சரிசெய்ய கண்மூடித்தனமாக முயற்சிக்காதீர்கள். எச்சரிக்கையின் மூல காரணத்தைப் புரிந்துகொள்வது சிறந்த குறியீட்டை எழுதவும் எதிர்காலத்தில் இதே போன்ற சிக்கல்களைத் தடுக்கவும் உதவும்.
• டெவலப்பர் கருவிகளைப் பயன்படுத்துங்கள்: உங்கள் கூறுகளை ஆய்வு செய்யவும் சாத்தியமான சிக்கல்களைக் கண்டறியவும் React டெவலப்பர் கருவிகளைப் பயன்படுத்திக் கொள்ளுங்கள். React டெவலப்பர் கருவிகள் உங்கள் செயலியின் நிலை, props மற்றும் செயல்திறன் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகின்றன.
• முழுமையாகச் சோதிக்கவும்: StrictMode-ஐ இயக்கி, ஏதேனும் எச்சரிக்கைகளைக் கையாண்ட பிறகு, எல்லாம் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த உங்கள் செயலியை முழுமையாகச் சோதிக்கவும். உங்கள் கூறுகள் சரியாகச் செயல்படுகின்றன என்பதைச் சரிபார்க்க யூனிட் சோதனைகள் மற்றும் ஒருங்கிணைப்பு சோதனைகளை எழுதுங்கள்.

பெர்லினில் உள்ள ஒரு குழு தங்கள் செயலிக்கான ஒரு புதிய அம்சத்தில் வேலை செய்வதைக் கவனியுங்கள். அவர்கள் உருவாக்கும் புதிய கூறுக்கு StrictMode-ஐ இயக்குகிறார்கள். உடனடியாக, படிவச் சமர்ப்பிப்புகளைக் கையாள்வதற்கான ஒரு பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-ன் பயன்பாட்டை StrictMode கொடியிடுகிறது. பின்னர் குழு பரிந்துரைக்கப்பட்ட அணுகுமுறையைப் பயன்படுத்த கூறினை உடனடியாக மறுசீரமைக்க முடியும், புதிய அம்சம் நவீன React நடைமுறைகளைப் பயன்படுத்தி உருவாக்கப்படுவதை உறுதிசெய்து, வழியில் ஏற்படக்கூடிய சிக்கல்களைத் தவிர்க்கிறது. இந்த மறுசெயல்பாட்டு செயல்முறை குறியீட்டுத் தரத்தில் தொடர்ச்சியான மேம்பாட்டை உறுதி செய்கிறது.

StrictMode மற்றும் செயல்திறன்

StrictMode முற்றிலும் ஒரு மேம்பாட்டு நேரக் கருவி என்பதைப் புரிந்துகொள்வது முக்கியம். அதன் சோதனைகள் மற்றும் எச்சரிக்கைகளைச் செய்ய மேம்பாட்டின் போது இது கூடுதல் சுமையைச் சேர்க்கிறது, ஆனால் இது no உங்கள் உற்பத்தி செயலியின் செயல்திறனில் தாக்கத்தை ஏற்படுத்தாது. உங்கள் செயலி உற்பத்திக்காக உருவாக்கப்படும்போது, StrictMode தானாகவே முடக்கப்பட்டு, அதன் சோதனைகள் இனி செய்யப்படாது.

StrictMode நேரடியாக செயல்திறனை மேம்படுத்தவில்லை என்றாலும், திறனற்ற குறியீடு அல்லது எதிர்பாராத பக்க விளைவுகளால் ஏற்படும் செயல்திறன் தடைகளைக் கண்டறிந்து சரிசெய்ய உதவுவதன் மூலம் மறைமுகமாக செயல்திறன் மேம்பாடுகளுக்கு வழிவகுக்கும். தூய்மையான, பராமரிக்கக்கூடிய குறியீட்டை எழுத உங்களை ஊக்குவிப்பதன் மூலம், நீண்ட காலத்திற்கு அதிக செயல்திறன் கொண்ட செயலிக்கு StrictMode பங்களிக்க முடியும்.

பக்க விளைவுகளை வெளிப்படுத்த StrictMode வேண்டுமென்றே சில செயல்பாடுகளை (கூறு கன்ஸ்ட்ரக்டர்கள் போன்றவை) இருமுறை அழைக்கிறது என்பது கவனிக்கத்தக்கது. இது மேம்பாட்டு பில்டுகளை மெதுவாக்கினாலும், அது வழங்கும் நன்மைகளுக்காக இது ஒரு அவசியமான சமரசமாகும்.

StrictMode மற்றும் மூன்றாம் தரப்பு நூலகங்கள்

StrictMode-ன் சோதனைகள் மற்றும் எச்சரிக்கைகள் மூன்றாம் தரப்பு நூலகங்கள் உட்பட <React.StrictMode> கூறின் அனைத்து துணை கூறுகளுக்கும் பொருந்தும். இதன் பொருள், நீங்கள் அறியாத மூன்றாம் தரப்பு குறியீட்டில் உள்ள சிக்கல்களை StrictMode கொடியிடக்கூடும்.

மூன்றாம் தரப்பு நூலகங்களில் உள்ள சிக்கல்களை நீங்கள் நேரடியாகச் சரிசெய்ய முடியாவிட்டாலும், StrictMode-ன் எச்சரிக்கைகள் மதிப்புமிக்கதாக இருக்கும். நூலகம் பயன்படுத்தும் சாத்தியமான இணக்கத்தன்மை சிக்கல்கள் அல்லது பயன்பாட்டிலிருந்து நீக்கப்பட்ட API-கள் குறித்து அவை உங்களை எச்சரிக்கலாம். இது நூலகத்தைப் பயன்படுத்துவதைத் தொடரலாமா அல்லது ஒரு மாற்றீட்டைக் கண்டுபிடிக்கலாமா என்பது குறித்து தகவலறிந்த முடிவுகளை எடுக்க உங்களை அனுமதிக்கிறது.

சில சமயங்களில், நூலகத்தின் கூறுகளை ஒரு தனிப்பட்ட கூறில் சுற்றி, அந்தக் குறிப்பிட்ட துணை மரத்திற்கு StrictMode-ஐ முடக்குவதன் மூலம் மூன்றாம் தரப்பு நூலகங்களில் உள்ள StrictMode எச்சரிக்கைகளை நீங்கள் சமாளிக்கலாம். இருப்பினும், இது எச்சரிக்கையுடன் செய்யப்பட வேண்டும், ஏனெனில் இது உங்கள் செயலியின் நடத்தையைப் பாதிக்கக்கூடிய சாத்தியமான சிக்கல்களை மறைக்கக்கூடும்.

StrictMode செயல்பாட்டில் உள்ளதற்கான எடுத்துக்காட்டுகள்

StrictMode உங்கள் குறியீட்டை மேம்படுத்த எப்படி உதவும் என்பதற்கான சில உறுதியான எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: பாதுகாப்பற்ற வாழ்க்கைச் சுழற்சி முறைகளைக் கண்டறிதல்

            import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillMount() {
    // Fetch data or perform other side effects
    console.log('componentWillMount is running');
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

StrictMode இயக்கப்பட்டிருக்கும் போது, அது கன்சோலில் ஒரு எச்சரிக்கையை பதிவு செய்யும், இது componentWillMount பயன்பாட்டிலிருந்து நீக்கப்பட்டு, componentDidMount உடன் மாற்றப்பட வேண்டும் என்பதைக் குறிக்கிறது.

எடுத்துக்காட்டு 2: எதிர்பாராத பக்க விளைவுகளைக் கண்டறிதல்

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // Side effect during rendering (bad practice!)
  setCount(count + 1);

  return <div>Count: {count}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

StrictMode கூறு செயல்பாட்டை இருமுறை அழைக்கும், இதனால் ஒவ்வொரு ரெண்டரின் போதும் setCount செயல்பாடு இரண்டு முறை அழைக்கப்படும். இது எண்ணிக்கை ஒன்றை விட இரண்டு அதிகரிப்பதற்கு வழிவகுக்கும், எதிர்பாராத பக்க விளைவு குறித்து உங்களை எச்சரிக்கும்.

எடுத்துக்காட்டு 3: பழைய String Ref API

            import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <input type="text" ref="myInput" />;
  }

  componentDidMount() {
    // Access the input element using the string ref
    this.refs.myInput.focus();
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

StrictMode ஒரு எச்சரிக்கையை பதிவு செய்யும், இது string refs பயன்பாட்டிலிருந்து நீக்கப்பட்டு, callback refs அல்லது React.createRef உடன் மாற்றப்பட வேண்டும் என்பதைக் குறிக்கிறது.

StrictMode மற்றும் Error Boundaries

StrictMode, ஒரு வலுவான பிழை கையாளும் பொறிமுறையை வழங்க Error Boundaries உடன் இணைந்து செயல்பட முடியும். StrictMode சாத்தியமான சிக்கல்களைக் கண்டறியும் போது, Error Boundaries ரெண்டரிங்கின் போது ஏற்படும் பிழைகளை அழகாகக் கையாள ஒரு வழியை வழங்குகின்றன. Error boundaries என்பவை React கூறுகளாகும், அவை தங்கள் குழந்தை கூறு மரத்தில் எங்கும் ஏற்படும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடிக்கின்றன, அந்தப் பிழைகளைப் பதிவு செய்கின்றன, மேலும் முழு கூறு மரமும் செயலிழப்பதற்குப் பதிலாக ஒரு பின்னடைவு UI-ஐக் காட்டுகின்றன.

உங்கள் செயலியை StrictMode மற்றும் Error Boundaries இரண்டிலும் சுற்றி வைப்பதன் மூலம், சாத்தியமான சிக்கல்கள் ஆரம்பத்திலேயே கண்டறியப்படுவதையும், பிழைகள் அழகாகக் கையாளப்படுவதையும் உறுதிசெய்து, சிறந்த பயனர் அனுபவத்தை வழங்க முடியும்.

StrictMode-க்கு மாற்றுகள்

StrictMode ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், உங்கள் React குறியீட்டின் தரத்தையும் பராமரிப்பையும் மேம்படுத்துவதற்கு மாற்று அணுகுமுறைகள் உள்ளன. அவையாவன:

• Linters: ESLint போன்ற Linters குறியீட்டுத் தரங்களைச் செயல்படுத்தவும் உங்கள் குறியீட்டில் உள்ள சாத்தியமான சிக்கல்களைக் கண்டறியவும் உதவும். தொடரியல் பிழைகள், பயன்படுத்தப்படாத மாறிகள் மற்றும் சாத்தியமான பாதுகாப்பு பாதிப்புகள் உள்ளிட்ட பரந்த அளவிலான சிக்கல்களைச் சரிபார்க்க Linters-ஐ உள்ளமைக்கலாம்.
• Type Checkers: TypeScript போன்ற Type checkers மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே வகை பிழைகளைப் பிடிக்க உதவும். Type checkers உங்கள் குறியீடு type-safe ஆக இருப்பதை உறுதிசெய்யும், இயக்க நேரப் பிழைகளின் அபாயத்தைக் குறைக்கும்.
• Unit Tests: யூனிட் சோதனைகளை எழுதுவது உங்கள் கூறுகள் சரியாகச் செயல்படுகின்றன என்பதைச் சரிபார்க்க உதவும். யூனிட் சோதனைகள் மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே பிழைகள் மற்றும் பின்னடைவுகளைக் கண்டறிய உதவும்.
• Code Reviews: குறியீட்டு மதிப்பாய்வுகளை நடத்துவது சாத்தியமான சிக்கல்களைக் கண்டறியவும் உங்கள் குறியீடு குறியீட்டுத் தரங்களை பூர்த்தி செய்வதை உறுதி செய்யவும் உதவும். குறியீட்டு மதிப்பாய்வுகள் உங்கள் குழுவிற்குள் அறிவு மற்றும் சிறந்த நடைமுறைகளைப் பகிர்ந்து கொள்ளவும் உதவும்.

இந்த மாற்றுகள் StrictMode-ஐ நிறைவு செய்கின்றன மற்றும் குறியீட்டுத் தரத்திற்கு ஒரு விரிவான அணுகுமுறையை வழங்க அதனுடன் இணைந்து பயன்படுத்தப்படலாம்.

முடிவுரை

React StrictMode என்பது உங்கள் React செயலிகளின் தரத்தையும் பராமரிப்பையும் மேம்படுத்துவதற்கான ஒரு மதிப்புமிக்க கருவியாகும். StrictMode-ஐ இயக்குவதன் மூலம், மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே சாத்தியமான சிக்கல்களைப் பிடிக்கலாம், சிறந்த நடைமுறைகளைச் செயல்படுத்தலாம், மற்றும் எதிர்கால React புதுப்பிப்புகளுக்கு உங்கள் செயலியைத் தயார்படுத்தலாம். இது ஒரு மேம்பாட்டு-மட்டும் அம்சமாக இருந்தாலும், அது வழங்கும் நன்மைகள் உங்கள் குறியீட்டுத் தளத்தின் நீண்ட கால ஆரோக்கியத்தையும் நிலைத்தன்மையையும் கணிசமாக மேம்படுத்த முடியும்.

நீங்கள் ஒரு அனுபவமிக்க React டெவலப்பராக இருந்தாலும் அல்லது இப்போதுதான் தொடங்கினாலும், உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் StrictMode-ஐ இணைப்பது ஒரு புத்திசாலித்தனமான நடவடிக்கையாகும். இது குறியீட்டுத் தரம், குறைக்கப்பட்ட பிழைத்திருத்த நேரம் மற்றும் மேம்பட்ட செயலி செயல்திறன் ஆகியவற்றின் அடிப்படையில் குறிப்பிடத்தக்க வருமானத்தை அளிக்கக்கூடிய ஒரு சிறிய முதலீடாகும். எனவே, StrictMode-ஐ ஏற்றுக்கொண்டு, மேலும் வலுவான மற்றும் நம்பகமான React மேம்பாட்டு சூழலைத் திறக்கவும்.