ரியாக்ட்டின் `experimental_useEvent`: நிலையான நிகழ்வு கையாளுதல் குறிப்புகளில் தேர்ச்சி பெறுதல்

ரியாக்ட் டெவலப்பர்கள் நிகழ்வு கையாளுதல்களை (event handlers) கையாளும்போது, அடிக்கடி அச்சுறுத்தும் "ஸ்டேல் க்ளோசர்ஸ்" (stale closures) சிக்கலை எதிர்கொள்கின்றனர். ஒரு காம்போனென்ட் மீண்டும் ரெண்டர் ஆகும்போது, நிகழ்வு கையாளுதல்கள் தங்கள் சுற்றியுள்ள ஸ்கோப்பிலிருந்து காலாவதியான மதிப்புகளைப் பிடிக்கும்போது இந்தச் சிக்கல் எழுகிறது. ரியாக்ட்டின் experimental_useEvent ஹூக், இதை சரிசெய்யவும் மற்றும் ஒரு நிலையான நிகழ்வு கையாளுதல் குறிப்பை வழங்கவும் வடிவமைக்கப்பட்டுள்ளது, இது செயல்திறன் மற்றும் கணிக்கக்கூடிய தன்மையை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த (தற்போது பரிசோதனையில் இருந்தாலும்) கருவியாகும். இந்தக் கட்டுரை experimental_useEvent-இன் நுணுக்கங்களை ஆராய்ந்து, அதன் நோக்கம், பயன்பாடு, நன்மைகள் மற்றும் சாத்தியமான குறைபாடுகளை விளக்குகிறது.

ஸ்டேல் க்ளோசர்ஸ் சிக்கலைப் புரிந்துகொள்ளுதல்

`experimental_useEvent` பற்றி தெரிந்துகொள்வதற்கு முன், அது தீர்க்கும் சிக்கலான ஸ்டேல் க்ளோசர்ஸ் பற்றி நமது புரிதலை வலுப்படுத்துவோம். இந்த எளிய சூழ்நிலையை கவனியுங்கள்:

            import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Count inside interval: ", count);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Empty dependency array - runs only once on mount

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், வெற்று சார்பு வரிசையுடன் (empty dependency array) கூடிய useEffect ஹூக், காம்போனென்ட் மவுண்ட் ஆகும்போது ஒருமுறை மட்டுமே இயங்கும். setInterval ஃபங்ஷன் count-இன் ஆரம்ப மதிப்பைப் (அதாவது 0) பிடிக்கிறது. நீங்கள் "Increment" பட்டனை க்ளிக் செய்து count ஸ்டேட்டைப் புதுப்பித்தாலும், setInterval கால்பேக் "Count inside interval: 0" என்று தொடர்ந்து லாக் செய்யும், ஏனெனில் க்ளோசருக்குள் பிடிக்கப்பட்ட count மதிப்பு மாறாமல் உள்ளது. இது ஸ்டேல் க்ளோசரின் ஒரு சிறந்த எடுத்துக்காட்டு. இடைவெளி (interval) மீண்டும் உருவாக்கப்படவில்லை மற்றும் புதிய 'count' மதிப்பைப் பெறவில்லை.

இந்தச் சிக்கல் இடைவெளிகளுக்கு (intervals) மட்டும் அல்ல. ஒரு ஃபங்ஷன் அதன் சுற்றியுள்ள ஸ்கோப்பிலிருந்து காலப்போக்கில் மாறக்கூடிய ஒரு மதிப்பைக் கைப்பற்றும் எந்த சூழ்நிலையிலும் இது வெளிப்படலாம். பொதுவான சூழ்நிலைகள் பின்வருமாறு:

• நிகழ்வு கையாளுதல்கள் (onClick, onChange, போன்றவை)
• மூன்றாம் தரப்பு நூலகங்களுக்கு அனுப்பப்படும் கால்பேக்குகள்
• ஒத்திசைவற்ற செயல்பாடுகள் (setTimeout, fetch)

`experimental_useEvent` அறிமுகம்

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

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

முக்கிய குறிப்பு: பெயரே குறிப்பிடுவது போல, experimental_useEvent இன்னும் பரிசோதனை கட்டத்தில் உள்ளது. இதன் பொருள், அதன் API எதிர்கால ரியாக்ட் வெளியீடுகளில் மாறக்கூடும், மேலும் இது இன்னும் உற்பத்திப் பயன்பாட்டிற்கு அதிகாரப்பூர்வமாகப் பரிந்துரைக்கப்படவில்லை. இருப்பினும், அதன் நோக்கத்தையும் சாத்தியமான நன்மைகளையும் புரிந்துகொள்வது மதிப்புமிக்கது.

`experimental_useEvent`-ஐப் பயன்படுத்துவது எப்படி

`experimental_useEvent`-ஐ திறம்பட பயன்படுத்துவது எப்படி என்பதற்கான ஒரு விளக்கம் இங்கே:

1. நிறுவல்:

   முதலில், பரிசோதனை அம்சங்களை ஆதரிக்கும் ரியாக்ட் பதிப்பு உங்களிடம் உள்ளதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். நீங்கள் react மற்றும் react-dom பரிசோதனைத் தொகுப்புகளை நிறுவ வேண்டியிருக்கலாம் (சமீபத்திய அறிவுறுத்தல்கள் மற்றும் பரிசோதனை வெளியீடுகள் தொடர்பான எச்சரிக்கைகளுக்கு அதிகாரப்பூர்வ ரியாக்ட் ஆவணத்தைப் பார்க்கவும்):

               npm install react@experimental react-dom@experimental
               
   
                 
                   Copy
                 
               
             

2. ஹூக்கை இறக்குமதி செய்தல்:

   react தொகுப்பிலிருந்து experimental_useEvent ஹூக்கை இறக்குமதி செய்யுங்கள்:

               import { experimental_useEvent } from 'react';
               
   
                 
                   Copy
                 
               
             

3. நிகழ்வு கையாளுதலை வரையறுத்தல்:

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

4. `experimental_useEvent`-ஐப் பயன்படுத்துதல்:

   உங்கள் நிகழ்வு கையாளுதல் ஃபங்ஷனை உள்ளீடாகக் கொடுத்து experimental_useEvent-ஐ அழைக்கவும். இது உங்கள் JSX-இல் பயன்படுத்தக்கூடிய ஒரு நிலையான நிகழ்வு கையாளுதல் ஃபங்ஷனைத் தரும்.

முந்தைய இடைவெளி எடுத்துக்காட்டில் உள்ள ஸ்டேல் க்ளோசர் சிக்கலை சரிசெய்ய experimental_useEvent-ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்கும் ஒரு எடுத்துக்காட்டு இங்கே:

            import React, { useState, useEffect, experimental_useEvent } from 'react';

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

  const intervalCallback = () => {
    console.log("Count inside interval: ", count);
  };

  const stableIntervalCallback = experimental_useEvent(intervalCallback);

  useEffect(() => {
    const timer = setInterval(() => {
      stableIntervalCallback();
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Empty dependency array - runs only once on mount

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

இப்போது, நீங்கள் "Increment" பட்டனை க்ளிக் செய்யும்போது, setInterval கால்பேக் புதுப்பிக்கப்பட்ட count மதிப்பைச் சரியாக லாக் செய்யும். ஏனென்றால் stableIntervalCallback எப்போதும் intervalCallback ஃபங்ஷனின் சமீபத்திய பதிப்பைக் குறிக்கிறது.

`experimental_useEvent`-ஐப் பயன்படுத்துவதன் நன்மைகள்

`experimental_useEvent`-ஐப் பயன்படுத்துவதன் முதன்மை நன்மைகள்:

• ஸ்டேல் க்ளோசர்ஸை நீக்குகிறது: இது நிகழ்வு கையாளுதல்கள் எப்போதும் தங்கள் சுற்றியுள்ள ஸ்கோப்பிலிருந்து சமீபத்திய மதிப்புகளைப் பெறுவதை உறுதிசெய்கிறது, எதிர்பாராத நடத்தை மற்றும் பிழைகளைத் தடுக்கிறது.
• மேம்படுத்தப்பட்ட செயல்திறன்: ஒரு நிலையான குறிப்பை வழங்குவதன் மூலம், நிகழ்வு கையாளுதலைச் சார்ந்திருக்கும் சைல்ட் காம்போனென்ட்களின் தேவையற்ற ரீ-ரெண்டர்களை இது தவிர்க்கிறது. React.memo அல்லது useMemo பயன்படுத்தும் மேம்படுத்தப்பட்ட காம்போனென்ட்களுக்கு இது குறிப்பாகப் பயனளிக்கிறது.
• எளிமைப்படுத்தப்பட்ட குறியீடு: இது பெரும்பாலும் மாறக்கூடிய மதிப்புகளைச் சேமிக்க useRef ஹூக்கைப் பயன்படுத்துவது அல்லது useEffect-இல் சார்புகளைக் கைமுறையாகப் புதுப்பிப்பது போன்ற மாற்று வழிகளுக்கான தேவையை நீக்கி உங்கள் குறியீட்டை எளிதாக்குகிறது.
• அதிகரித்த கணிக்கக்கூடிய தன்மை: காம்போனென்ட் நடத்தையை மேலும் கணிக்கக்கூடியதாகவும், பகுத்தறிவதற்கு எளிதாகவும் ஆக்குகிறது, இது மேலும் பராமரிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது.

`experimental_useEvent`-ஐ எப்போது பயன்படுத்த வேண்டும்

பின்வரும் சூழ்நிலைகளில் `experimental_useEvent`-ஐப் பயன்படுத்தலாம்:

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

இருப்பினும், experimental_useEvent இன்னும் பரிசோதனையில் உள்ளது என்பதை நினைவில் கொள்வது அவசியம். உற்பத்தி குறியீட்டில் அதைப் பயன்படுத்துவதற்கு முன்பு சாத்தியமான அபாயங்கள் மற்றும் சமரசங்களைக் கவனியுங்கள்.

சாத்தியமான குறைபாடுகள் மற்றும் கருத்தாய்வுகள்

`experimental_useEvent` குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், அதன் சாத்தியமான குறைபாடுகளைப் பற்றி அறிந்திருப்பது முக்கியம்:

• பரிசோதனை நிலை: இதன் API எதிர்கால ரியாக்ட் வெளியீடுகளில் மாற்றத்திற்கு உட்பட்டது. இதைப் பயன்படுத்துவதால் பின்னர் உங்கள் குறியீட்டை மீண்டும் மாற்றியமைக்க வேண்டியிருக்கலாம்.
• அதிகரித்த சிக்கல்தன்மை: சில சமயங்களில் இது குறியீட்டை எளிதாக்கினாலும், நியாயமாகப் பயன்படுத்தப்படாவிட்டால் சிக்கலையும் சேர்க்கலாம்.
• வரையறுக்கப்பட்ட உலாவி ஆதரவு: இது புதிய ஜாவாஸ்கிரிப்ட் அம்சங்கள் அல்லது ரியாக்ட் இன்டர்னல்ஸை நம்பியிருப்பதால், பழைய உலாவிகளில் இணக்கத்தன்மை சிக்கல்கள் இருக்கலாம் (இருப்பினும் ரியாக்ட்டின் பாலிஃபில்கள் பொதுவாக இதை சரிசெய்கின்றன).
• அதிகப்படியான பயன்பாட்டிற்கான வாய்ப்பு: ஒவ்வொரு நிகழ்வு கையாளுதலையும் experimental_useEvent உடன் இணைக்கத் தேவையில்லை. அதை அதிகமாகப் பயன்படுத்துவது தேவையற்ற சிக்கலுக்கு வழிவகுக்கும்.

`experimental_useEvent`-க்கான மாற்று வழிகள்

ஒரு பரிசோதனை அம்சத்தைப் பயன்படுத்த நீங்கள் தயங்கினால், ஸ்டேல் க்ளோசர்ஸ் சிக்கலைச் சமாளிக்க உதவும் பல மாற்று வழிகள் உள்ளன:

1. `useRef`-ஐப் பயன்படுத்துதல்:**

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

               import React, { useState, useEffect, useRef } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
     const countRef = useRef(count);
   
     useEffect(() => {
       countRef.current = count;
     }, [count]);
   
     useEffect(() => {
       const timer = setInterval(() => {
         console.log("Count inside interval: ", countRef.current);
       }, 1000);
   
       return () => clearInterval(timer);
     }, []);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy
                 
               
             

2. இன்லைன் ஃபங்ஷன்கள்:**

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

               import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => {
           console.log("Current count: ", count);
           setCount(count + 1);
         }}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy
                 
               
             

3. ஃபங்ஷன் அப்டேட்கள்:**

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

               import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy