ரியாக்ட் useEvent: நிலையான நிகழ்வு கையாளும் குறிப்புகளை அடைதல்

ரியாக்ட் டெவலப்பர்கள் நிகழ்வு கையாளிகளுடன் (event handlers) பணிபுரியும்போது, குறிப்பாக டைனமிக் கூறுகள் மற்றும் குளோஷர்கள் (closures) சம்பந்தப்பட்ட சூழ்நிலைகளில், அடிக்கடி சவால்களை எதிர்கொள்கின்றனர். ரியாக்ட் சுற்றுச்சூழல் அமைப்பில் ஒப்பீட்டளவில் சமீபத்திய সংযர்ப்பான useEvent ஹூக், இந்த சிக்கல்களுக்கு ஒரு நேர்த்தியான தீர்வை வழங்குகிறது, இது டெவலப்பர்களுக்கு தேவையற்ற மறு-ரெண்டர்களைத் தூண்டாத நிலையான நிகழ்வு கையாளும் குறிப்புகளை உருவாக்க உதவுகிறது.

பிரச்சனையைப் புரிந்துகொள்ளுதல்: நிகழ்வு கையாளிகளின் நிலையற்ற தன்மை

ரியாக்ட்டில், கூறுகளின் props அல்லது state மாறும்போது அவை மீண்டும் ரெண்டர் ஆகின்றன. ஒரு நிகழ்வு கையாளும் செயல்பாடு ஒரு prop ஆக அனுப்பப்படும்போது, பெற்றோர் கூற்றின் ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய செயல்பாட்டு நிகழ்வு (function instance) அடிக்கடி உருவாக்கப்படுகிறது. இந்த புதிய செயல்பாட்டு நிகழ்வு, அதே தர்க்கத்தைக் கொண்டிருந்தாலும், ரியாக்ட்டால் வேறுபட்டதாகக் கருதப்படுகிறது, இது அதைப் பெறும் குழந்தை கூற்றின் மறு-ரெண்டருக்கு வழிவகுக்கிறது.

இந்த எளிய உதாரணத்தைக் கவனியுங்கள்:


import React, { useState } from 'react';

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

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    
      
      Count: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

இந்த எடுத்துக்காட்டில், ParentComponent-இன் ஒவ்வொரு ரெண்டரிலும் handleClick மீண்டும் உருவாக்கப்படுகிறது. ChildComponent மேம்படுத்தப்பட்டிருந்தாலும் (எ.கா., React.memo பயன்படுத்தி), onClick prop மாறியிருப்பதால் அது இன்னும் மறு-ரெண்டர் ஆகும். இது சிக்கலான பயன்பாடுகளில் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும்.

useEvent-ஐ அறிமுகப்படுத்துதல்: தீர்வு

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

ரியாக்ட்டின் உள்ளமைக்கப்பட்ட ஹூக்காக useEvent இல்லை என்றாலும் (ரியாக்ட் 18 வரை), இதை எளிதாக ஒரு கஸ்டம் ஹூக்காக செயல்படுத்தலாம் அல்லது சில கட்டமைப்புகள் மற்றும் நூலகங்களில், இது அவற்றின் பயன்பாட்டு தொகுப்பின் ஒரு பகுதியாக வழங்கப்படுகிறது. இங்கே ஒரு பொதுவான செயலாக்கம்:


import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

export default useEvent;

விளக்கம்:

`useRef(fn)`: செயல்பாடு `fn`-இன் சமீபத்திய பதிப்பை வைத்திருக்க ஒரு ref உருவாக்கப்படுகிறது. Refs, அவற்றின் மதிப்பு மாறும் போது மறு-ரெண்டர்களை ஏற்படுத்தாமல், ரெண்டர்கள் முழுவதும் நீடிக்கும்.
`useLayoutEffect(() => { ref.current = fn; })`: இந்த எஃபெக்ட், ref-இன் தற்போதைய மதிப்பை `fn`-இன் சமீபத்திய பதிப்புடன் புதுப்பிக்கிறது. useLayoutEffect அனைத்து DOM மாற்றங்களுக்கும் பிறகு ஒத்திசைவாக (synchronously) இயங்குகிறது. எந்த நிகழ்வு கையாளிகளும் அழைக்கப்படுவதற்கு முன்பு ref புதுப்பிக்கப்படுவதை இது உறுதி செய்வதால் இது முக்கியமானது. useEffect-ஐப் பயன்படுத்துவது, நிகழ்வு கையாளி `fn`-இன் காலாவதியான மதிப்பை குறிப்பிடும் நுட்பமான பிழைகளுக்கு வழிவகுக்கும்.
`useCallback((...args) => { return ref.current(...args); }, [])`: இது ஒரு நினைவூட்டப்பட்ட (memoized) செயல்பாட்டை உருவாக்குகிறது, இது அழைக்கப்படும்போது, ref-இல் சேமிக்கப்பட்ட செயல்பாட்டை அழைக்கிறது. வெற்று சார்பு வரிசை `[]` இந்த நினைவூட்டப்பட்ட செயல்பாடு ஒருமுறை மட்டுமே உருவாக்கப்படுவதை உறுதிசெய்கிறது, இதன் மூலம் ஒரு நிலையான குறிப்பை வழங்குகிறது. ஸ்ப்ரெட் சிண்டாக்ஸ் `...args` நிகழ்வு கையாளி எந்த எண்ணிக்கையிலான ஆர்குமென்ட்களையும் ஏற்க அனுமதிக்கிறது.

நடைமுறையில் useEvent-ஐப் பயன்படுத்துதல்

இப்போது, முந்தைய எடுத்துக்காட்டை useEvent-ஐப் பயன்படுத்தி மாற்றி அமைப்போம்:


import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

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

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    
      
      Count: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

handleClick-ஐ useEvent உடன் சேர்ப்பதன் மூலம், count state மாறினாலும், ParentComponent-இன் ரெண்டர்கள் முழுவதும் ChildComponent ஒரே செயல்பாட்டு குறிப்பைப் பெறுவதை நாங்கள் உறுதிசெய்கிறோம். இது ChildComponent-இன் தேவையற்ற மறு-ரெண்டர்களைத் தடுக்கிறது.

useEvent பயன்படுத்துவதன் நன்மைகள்

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

useEvent-க்கான பயன்பாட்டு வழக்குகள்

நிகழ்வு கையாளிகளை props ஆக அனுப்புதல்: மேலே உள்ள எடுத்துக்காட்டுகளில் நிரூபிக்கப்பட்டபடி, இது மிகவும் பொதுவான பயன்பாட்டு வழக்கு. நிகழ்வு கையாளிகளை குழந்தை கூறுகளுக்கு props ஆக அனுப்பும்போது நிலையான குறிப்புகளை உறுதி செய்வது தேவையற்ற மறு-ரெண்டர்களைத் தடுப்பதற்கு முக்கியமானது.
useEffect இல் கால்பேக்குகள்: useEffect கால்பேக்குகளுக்குள் நிகழ்வு கையாளிகளைப் பயன்படுத்தும்போது, useEvent சார்பு வரிசையில் (dependency array) கையாளியைச் சேர்க்க வேண்டிய தேவையைத் தடுக்கலாம், இது சார்பு நிர்வாகத்தை எளிதாக்குகிறது.
மூன்றாம் தரப்பு நூலகங்களுடன் ஒருங்கிணைத்தல்: சில மூன்றாம் தரப்பு நூலகங்கள் அவற்றின் உள் மேம்படுத்தல்களுக்கு நிலையான செயல்பாட்டு குறிப்புகளைச் சார்ந்திருக்கலாம். useEvent இந்த நூலகங்களுடன் இணக்கத்தன்மையை உறுதிசெய்ய உதவும்.
கஸ்டம் ஹூக்குகள்: நிகழ்வு கேட்பான்களை நிர்வகிக்கும் கஸ்டம் ஹூக்குகளை உருவாக்குவது, நுகர்வோர் கூறுகளுக்கு நிலையான கையாளும் குறிப்புகளை வழங்க useEvent-ஐப் பயன்படுத்துவதன் மூலம் பெரும்பாலும் பயனடைகிறது.

மாற்று வழிகள் மற்றும் கவனத்தில் கொள்ள வேண்டியவை

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

வெற்று சார்பு வரிசையுடன் `useCallback`: useEvent-இன் செயலாக்கத்தில் நாம் பார்த்தது போல், வெற்று சார்பு வரிசையுடன் useCallback ஒரு நிலையான குறிப்பை வழங்க முடியும். இருப்பினும், கூறு மீண்டும் ரெண்டர் ஆகும்போது அது தானாகவே செயல்பாட்டின் உள்ளடக்கத்தைப் புதுப்பிக்காது. இந்த இடத்தில் தான் useEvent, ref-ஐ புதுப்பிக்க useLayoutEffect-ஐப் பயன்படுத்தி சிறந்து விளங்குகிறது.
வகுப்பு கூறுகள் (Class Components): வகுப்பு கூறுகளில், நிகழ்வு கையாளிகள் பொதுவாக கன்ஸ்ட்ரக்டரில் கூறு நிகழ்வுடன் பிணைக்கப்படுகின்றன, இது இயல்பாகவே ஒரு நிலையான குறிப்பை வழங்குகிறது. இருப்பினும், நவீன ரியாக்ட் மேம்பாட்டில் வகுப்பு கூறுகள் குறைவாகவே பயன்படுத்தப்படுகின்றன.
React.memo: React.memo, கூறுகளின் props மாறாதபோது அவற்றின் மறு-ரெண்டர்களைத் தடுக்க முடியும் என்றாலும், அது props-இன் மேலோட்டமான ஒப்பீட்டை மட்டுமே செய்கிறது. ஒவ்வொரு ரெண்டரிலும் நிகழ்வு கையாளி prop ஒரு புதிய செயல்பாட்டு நிகழ்வாக இருந்தால், React.memo மறு-ரெண்டரைத் தடுக்காது.
அதிகப்படியான-மேம்படுத்தல் (Over-Optimization): அதிகப்படியாக மேம்படுத்துவதைத் தவிர்ப்பது முக்கியம். useEvent-ஐப் பயன்படுத்துவதற்கு முன்னும் பின்னும் செயல்திறனை அளவிடவும், அது உண்மையில் ஒரு நன்மையை வழங்குகிறதா என்பதை உறுதிப்படுத்தவும். சில சந்தர்ப்பங்களில், useEvent-இன் கூடுதல் சுமை செயல்திறன் ஆதாயங்களை விட அதிகமாக இருக்கலாம்.

சர்வதேசமயமாக்கல் மற்றும் அணுகல்தன்மை பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக ரியாக்ட் பயன்பாடுகளை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் அணுகல்தன்மை (a11y) ஆகியவற்றைக் கருத்தில் கொள்வது முக்கியம். useEvent நேரடியாக i18n அல்லது a11y-ஐ பாதிக்காது, ஆனால் அது உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கம் அல்லது அணுகல்தன்மை அம்சங்களைக் கையாளும் கூறுகளின் செயல்திறனை மறைமுகமாக மேம்படுத்தும்.

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

எடுத்துக்காட்டு: உள்ளூர்மயமாக்கலுடன் useEvent


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // Perform some action based on the language
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //Simulate language change
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      
        
        
      
    
  );
}

export default App;

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

முடிவுரை

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

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