ரியாக்ட் useMemo: மெமோயிசேஷன் மூலம் செயல்திறனை மேம்படுத்துதல்

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

மெமோயிசேஷனைப் புரிந்துகொள்ளுதல்

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

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

ரியாக்ட் useMemo அறிமுகம்

ரியாக்டில் உள்ள useMemo ஹூக், ஃபங்ஷனல் காம்போனென்ட்களுக்குள் மதிப்புகளை மெமோயிஸ் செய்ய ஒரு வழியை வழங்குகிறது. இது இரண்டு ஆர்குமென்ட்களை ஏற்றுக்கொள்கிறது:

• கணக்கீட்டைச் செய்யும் ஒரு ஃபங்ஷன்.
• சார்புகளின் (dependencies) ஒரு வரிசை.

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

useMemo-வின் தொடரியல்

useMemo-வின் தொடரியல் மிகவும் எளிமையானது:

const memoizedValue = useMemo(() => {
  // இங்கே செலவுமிக்க கணக்கீடு
  return computeExpensiveValue(a, b);
}, [a, b]);

இந்த எடுத்துக்காட்டில், computeExpensiveValue(a, b) என்பது செலவுமிக்க கணக்கீட்டைச் செய்யும் ஃபங்ஷன் ஆகும். [a, b] என்ற வரிசை சார்புகளைக் குறிப்பிடுகிறது. a அல்லது b மாறினால் மட்டுமே useMemo ஹூக் computeExpensiveValue ஃபங்ஷனை மீண்டும் இயக்கும். இல்லையெனில், அது முந்தைய ரெண்டரிலிருந்து கேச் செய்யப்பட்ட மதிப்பைத் திருப்பித் தரும்.

useMemo-வை எப்போது பயன்படுத்துவது

useMemo பின்வரும் சூழ்நிலைகளில் மிகவும் பயனுள்ளதாக இருக்கும்:

• செலவுமிக்க கணக்கீடுகள்: சிக்கலான தரவு மாற்றங்கள் அல்லது பெரிய தரவுத்தொகுப்புகளை வடிகட்டுதல் போன்ற கணக்கீட்டு ரீதியாகத் தீவிரமான பணியைச் செய்யும் ஃபங்ஷன் உங்களிடம் இருக்கும்போது.
• ரெஃபரென்ஷியல் ஈக்வாலிட்டி சோதனைகள்: ஒரு மதிப்பு அதன் அடிப்படDependencies மாறும் போது மட்டுமே மாறுகிறது என்பதை உறுதி செய்ய வேண்டியிருக்கும் போது, குறிப்பாக React.memo பயன்படுத்தும் சைல்டு காம்போனென்ட்களுக்கு மதிப்புகளை props ஆக அனுப்பும்போது.
• தேவையற்ற ரீ-ரெண்டர்களைத் தடுத்தல்: ஒரு காம்போனென்டின் props அல்லது state உண்மையில் மாறாத வரை அது மீண்டும் ரெண்டர் செய்வதைத் தடுக்க விரும்பும்போது.

இந்த ஒவ்வொரு சூழ்நிலையையும் நடைமுறை எடுத்துக்காட்டுகளுடன் விரிவாகப் பார்ப்போம்.

சூழல் 1: செலவுமிக்க கணக்கீடுகள்

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

const UserList = ({ users, filter }) => {
  const filteredUsers = useMemo(() => {
    console.log('பயனர்களை வடிகட்டுகிறது...'); // செலவுமிக்க கணக்கீட்டை உருவகப்படுத்துதல்
    return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
  }, [users, filter]);

  return (
    

      {filteredUsers.map(user => (
        
{user.name}
      ))}
    
  );
};

இந்த எடுத்துக்காட்டில், filteredUsers வேரியபிள் useMemo ஐப் பயன்படுத்தி மெமோயிஸ் செய்யப்படுகிறது. users வரிசை அல்லது filter மதிப்பு மாறும்போது மட்டுமே வடிகட்டுதல் லாஜிக் மீண்டும் இயக்கப்படுகிறது. users வரிசை மற்றும் filter மதிப்பு அப்படியே இருந்தால், useMemo ஹூக் கேச் செய்யப்பட்ட filteredUsers வரிசையைத் திருப்பித் தரும், இது வடிகட்டுதல் லாஜிக் தேவையற்ற முறையில் மீண்டும் இயக்கப்படுவதைத் தடுக்கிறது.

சூழல் 2: ரெஃபரென்ஷியல் ஈக்வாலிட்டி சோதனைகள்

React.memo பயன்படுத்தும் சைல்டு காம்போனென்ட்களுக்கு மதிப்புகளை props ஆக அனுப்பும்போது, props அவற்றின் அடிப்படDependencies மாறும் போது மட்டுமே மாறுகின்றன என்பதை உறுதி செய்வது மிகவும் முக்கியம். இல்லையெனில், சைல்டு காம்போனென்ட் அது காட்டும் தரவு மாறாவிட்டாலும் தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகலாம்.

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent மீண்டும் ரெண்டர் செய்யப்பட்டது!');
  return 
{data.value}
;
});

const ParentComponent = () => {
  const [a, setA] = React.useState(1);
  const [b, setB] = React.useState(2);

  const data = useMemo(() => ({
    value: a + b,
  }), [a, b]);

  return (
    

      
       setA(a + 1)}>A-ஐ அதிகரிக்கவும்
       setB(b + 1)}>B-ஐ அதிகரிக்கவும்
    
  );
};

இந்த எடுத்துக்காட்டில், data ஆப்ஜெக்ட் useMemo ஐப் பயன்படுத்தி மெமோயிஸ் செய்யப்படுகிறது. React.memo உடன் இணைக்கப்பட்ட MyComponent, data prop மாறும் போது மட்டுமே மீண்டும் ரெண்டர் ஆகும். data மெமோயிஸ் செய்யப்பட்டிருப்பதால், a அல்லது b மாறும் போது மட்டுமே அது மாறும். useMemo இல்லாமல், ParentComponent-இன் ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய data ஆப்ஜெக்ட் உருவாக்கப்படும், இதனால் a + b-இன் மதிப்பு அப்படியே இருந்தாலும் MyComponent தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகும்.

சூழல் 3: தேவையற்ற ரீ-ரெண்டர்களைத் தடுத்தல்

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

const MyComponent = ({ config }) => {
  const processedConfig = useMemo(() => {
    // config ஆப்ஜெக்டை செயலாக்குதல் (செலவுமிக்க செயல்பாடு)
    console.log('config-ஐ செயலாக்குகிறது...');
    let result = {...config}; // எளிய உதாரணம், ஆனால் சிக்கலானதாகவும் இருக்கலாம்
    if (result.theme === 'dark') {
        result.textColor = 'white';
    } else {
        result.textColor = 'black';
    }
    return result;
  }, [config]);

  return (
    

      
{processedConfig.title}
      
{processedConfig.description}
    
  );
};

const App = () => {
  const [theme, setTheme] = React.useState('light');
  const config = useMemo(() => ({
      title: 'My App',
      description: 'This is a sample app.',
      theme: theme
  }), [theme]);

  return (
    

      
       setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme
    
  );
};

இந்த எடுத்துக்காட்டில், processedConfig ஆப்ஜெக்ட் config prop-ஐ அடிப்படையாகக் கொண்டு மெமோயிஸ் செய்யப்படுகிறது. செலவுமிக்க config செயலாக்க லாஜிக், config ஆப்ஜெக்ட் மாறும் போது மட்டுமே (அதாவது, theme மாறும் போது) இயங்குகிறது. முக்கியமாக, `App` காம்போனென்ட் மீண்டும் ரெண்டர் ஆகும் போதெல்லாம் `config` ஆப்ஜெக்ட் மீண்டும் வரையறுக்கப்பட்டாலும், `useMemo`-ஐப் பயன்படுத்துவதால், `theme` வேரியபிள் மாறும் போது மட்டுமே `config` ஆப்ஜெக்ட் உண்மையில் மாறும். `App` காம்போனென்டில் useMemo ஹூக் இல்லாமல், `App`-இன் ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய `config` ஆப்ஜெக்ட் உருவாக்கப்படும், இதனால் அடிப்படை தரவு (theme) ஒரே மாதிரியாக இருந்தாலும், `MyComponent` ஒவ்வொரு முறையும் `processedConfig`-ஐ மீண்டும் கணக்கிடும்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

useMemo ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அதை நியாயமான முறையில் பயன்படுத்துவது முக்கியம். மெமோயிஸ் செய்யப்பட்ட மதிப்புகளை நிர்வகிப்பதற்கான செலவு, மறு கணக்கீடுகளைத் தவிர்ப்பதன் மூலம் கிடைக்கும் நன்மைகளை விட அதிகமாக இருந்தால், useMemo-ஐ அதிகமாகப் பயன்படுத்துவது உண்மையில் செயல்திறனைக் குறைக்கலாம்.

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

useMemo-விற்கு மாற்றுகள்

மதிப்புகளை மெமோயிஸ் செய்வதற்கு useMemo ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், ரியாக்ட் செயலிகளில் செயல்திறனை மேம்படுத்த நீங்கள் பயன்படுத்தக்கூடிய பிற நுட்பங்களும் உள்ளன.

• React.memo: React.memo என்பது ஒரு ஃபங்ஷனல் காம்போனென்டை மெமோயிஸ் செய்யும் ஒரு உயர்-நிலை காம்போனென்ட் ஆகும். அதன் props மாறாத வரை காம்போனென்ட் மீண்டும் ரெண்டர் செய்வதைத் தடுக்கிறது. ஒரே props-ஐ மீண்டும் மீண்டும் பெறும் காம்போனென்ட்களின் செயல்திறனை மேம்படுத்துவதற்கு இது பயனுள்ளதாக இருக்கும்.
• PureComponent (கிளாஸ் காம்போனென்ட்களுக்கு): React.memo-வைப் போலவே, PureComponent-ம் props மற்றும் state-இன் ஒரு மேலோட்டமான ஒப்பீட்டைச் செய்து, காம்போனென்ட் மீண்டும் ரெண்டர் செய்ய வேண்டுமா என்பதைத் தீர்மானிக்கிறது.
• கோட் ஸ்ப்ளிட்டிங் (Code Splitting): கோட் ஸ்ப்ளிட்டிங் உங்கள் செயலியைத் தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய பண்டில்களாகப் பிரிக்க உங்களை அனுமதிக்கிறது. இது உங்கள் செயலியின் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்தி, அலசப்பட்டு இயக்கப்பட வேண்டிய குறியீட்டின் அளவைக் குறைக்கும்.
• Debouncing மற்றும் Throttling: Debouncing மற்றும் throttling என்பது ஒரு ஃபங்ஷன் இயக்கப்படும் விகிதத்தைக் கட்டுப்படுத்தப் பயன்படும் நுட்பங்கள். ஸ்க்ரோல் ஹேண்ட்லர்கள் அல்லது ரீசைஸ் ஹேண்ட்லர்கள் போன்ற அடிக்கடி தூண்டப்படும் ஈவன்ட் ஹேண்ட்லர்களின் செயல்திறனை மேம்படுத்துவதற்கு இது பயனுள்ளதாக இருக்கும்.

உலகெங்கிலுமிருந்து நடைமுறை உதாரணங்கள்

உலகெங்கிலும் உள்ள பல்வேறு சூழல்களில் useMemo எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான சில எடுத்துக்காட்டுகளைப் பார்ப்போம்:

• மின் வணிகம் (உலகளாவிய): ஒரு உலகளாவிய மின் வணிகத் தளம், சிக்கலான தயாரிப்பு வடிகட்டுதல் மற்றும் வரிசைப்படுத்தும் செயல்பாடுகளின் முடிவுகளை கேச் செய்ய useMemo-ஐப் பயன்படுத்தலாம், இது உலகெங்கிலும் உள்ள பயனர்களுக்கு அவர்களின் இருப்பிடம் அல்லது இணைய இணைப்பு வேகத்தைப் பொருட்படுத்தாமல் வேகமான மற்றும் பதிலளிக்கக்கூடிய ஷாப்பிங் அனுபவத்தை உறுதி செய்கிறது. உதாரணமாக, டோக்கியோவில் உள்ள ஒரு பயனர் விலை வரம்பு மற்றும் இருப்பு ஆகியவற்றின் அடிப்படையில் தயாரிப்புகளை வடிகட்டும்போது, மெமோயிஸ் செய்யப்பட்ட வடிகட்டுதல் ஃபங்ஷனிலிருந்து பயனடைவார்.
• நிதி டாஷ்போர்டு (சர்வதேசம்): நிகழ்நேர பங்கு விலைகள் மற்றும் சந்தைத் தரவைக் காட்டும் ஒரு நிதி டாஷ்போர்டு, மூவிங் ஆவரேஜ்கள் அல்லது ஏற்ற இறக்க நடவடிக்கைகள் போன்ற நிதி குறிகாட்டிகளை உள்ளடக்கிய கணக்கீடுகளின் முடிவுகளை கேச் செய்ய useMemo-ஐப் பயன்படுத்தலாம். இது அதிக அளவு தரவைக் காட்டும்போது டாஷ்போர்டு மந்தமாக மாறுவதைத் தடுக்கும். லண்டனில் ஒரு வர்த்தகர் பங்குச் செயல்திறனைக் கண்காணிக்கும்போது மென்மையான புதுப்பிப்புகளைக் காண்பார்.
• வரைபடச் செயலி (பிராந்திய): புவியியல் தரவைக் காட்டும் ஒரு வரைபடச் செயலி, வரைபட προβολήகள் மற்றும் ஒருங்கிணைப்பு மாற்றங்கள் சம்பந்தப்பட்ட கணக்கீடுகளின் முடிவுகளை கேச் செய்ய useMemo-ஐப் பயன்படுத்தலாம். இது வரைபடத்தை பெரிதாக்கும்போதும் நகர்த்தும்போதும் செயலியின் செயல்திறனை மேம்படுத்தும், குறிப்பாக பெரிய தரவுத்தொகுப்புகள் அல்லது சிக்கலான வரைபட பாணிகளைக் கையாளும்போது. அமேசான் மழைக்காடுகளின் விரிவான வரைபடத்தை ஆராயும் ஒரு பயனர் வேகமான ரெண்டரிங்கை அனுபவிப்பார்.
• மொழிபெயர்ப்பு செயலி (பல்மொழி): ஒரு மொழிபெயர்ப்பு செயலி, மொழிபெயர்க்கப்பட்ட உரையின் பெரிய பகுதிகளைச் செயலாக்கி காட்ட வேண்டும் என்று கற்பனை செய்து பாருங்கள். useMemo உரை வடிவமைப்பு மற்றும் ரெண்டரிங்கை மெமோயிஸ் செய்யப் பயன்படுத்தப்படலாம், இது காட்டப்படும் மொழியைப் பொருட்படுத்தாமல் ஒரு மென்மையான பயனர் அனுபவத்தை உறுதி செய்கிறது. இது சீன அல்லது அரபு போன்ற சிக்கலான எழுத்துத் தொகுப்புகளைக் கொண்ட மொழிகளுக்கு மிகவும் முக்கியமானது.

முடிவுரை

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

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