தமிழ்

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

ரியாக்ட் பேட்சிங்: செயல்திறனுக்காக ஸ்டேட் அப்டேட்களை மேம்படுத்துதல்

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

ரியாக்ட் பேட்சிங் என்றால் என்ன?

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

ரியாக்ட் 18-க்கு முன்பு, பேட்சிங் ரியாக்ட் நிகழ்வு கையாளுபவர்களுக்குள் (event handlers) மட்டுமே நிகழ்ந்தது. setTimeout, ப்ராமிஸ்கள் அல்லது நேட்டிவ் நிகழ்வு கையாளுபவர்கள் போன்றவற்றுக்குள் இருக்கும் ஸ்டேட் அப்டேட்கள் தொகுக்கப்படவில்லை. இது பெரும்பாலும் எதிர்பாராத ரீ-ரெண்டர்களுக்கும் செயல்திறன் சிக்கல்களுக்கும் வழிவகுத்தது.

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

ரியாக்ட் பேட்சிங்கின் நன்மைகள்

ரியாக்ட் பேட்சிங்கின் நன்மைகள் குறிப்பிடத்தக்கவை மற்றும் பயனர் அனுபவத்தை நேரடியாக பாதிக்கின்றன:

ரியாக்ட் பேட்சிங் எவ்வாறு செயல்படுகிறது

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

ஒரு எளிய உதாரணத்தைக் கருத்தில் கொள்வோம்:


import React, { useState } from 'react';

function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    setCount1(count1 + 1);
    setCount2(count2 + 1);
  };

  console.log('Component re-rendered');

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment Both</button>
    </div>
  );
}

export default ExampleComponent;

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

தொகுக்கப்படாத புதுப்பிப்புகள்: பேட்சிங் பொருந்தாதபோது

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

ரியாக்ட் இந்த நோக்கத்திற்காக flushSync API-ஐ வழங்குகிறது. flushSync நிலுவையில் உள்ள அனைத்து புதுப்பிப்புகளையும் ஒத்திசைவாகச் செயல்படுத்தி, DOM-ஐ உடனடியாக புதுப்பிக்க ரியாக்ட்டை கட்டாயப்படுத்துகிறது.

இதோ ஒரு உதாரணம்:


import React, { useState } from 'react';
import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    flushSync(() => {
      setText(event.target.value);
    });
    console.log('Input value after update:', event.target.value);
  };

  return (
    <input type="text" value={text} onChange={handleChange} />
  );
}

export default ExampleComponent;

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

மேம்பட்ட மேம்படுத்தல் நுட்பங்கள்

ரியாக்ட் பேட்சிங் ஒரு குறிப்பிடத்தக்க செயல்திறன் ஊக்கத்தை அளித்தாலும், உங்கள் பயன்பாட்டின் செயல்திறனை மேலும் மேம்படுத்த நீங்கள் பயன்படுத்தக்கூடிய கூடுதல் மேம்படுத்தல் நுட்பங்கள் உள்ளன.

1. செயல்பாட்டு புதுப்பிப்புகளைப் பயன்படுத்துதல் (Using Functional Updates)

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

இவ்வாறு பயன்படுத்துவதற்கு பதிலாக:


setCount(count + 1);

இவ்வாறு பயன்படுத்தவும்:


setCount((prevCount) => prevCount + 1);

செயல்பாட்டு புதுப்பிப்புகள் பழைய குளோசர்கள் தொடர்பான சிக்கல்களைத் தடுத்து, துல்லியமான ஸ்டேட் புதுப்பிப்புகளை உறுதி செய்கின்றன.

2. மாற்றமுடியாத தன்மை (Immutability)

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

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

உதாரணமாக, இவ்வாறு பயன்படுத்துவதற்கு பதிலாக:


const updatedItems = items;
updatedItems.push(newItem);
setItems(updatedItems);

இவ்வாறு பயன்படுத்தவும்:


setItems([...items, newItem]);

ஸ்ப்ரெட் ஆபரேட்டர் (...) இருக்கும் உருப்படிகள் மற்றும் இறுதியில் சேர்க்கப்பட்ட புதிய உருப்படியுடன் ஒரு புதிய வரிசையை உருவாக்குகிறது.

3. மெமோயிசேஷன் (Memoization)

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

React.memo பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:


import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent re-rendered');
  return <div>{data.name}</div>;
});

export default MyComponent;

இந்த எடுத்துக்காட்டில், data ப்ராப் மாறினால் மட்டுமே MyComponent ரீ-ரெண்டர் செய்யும்.

4. குறியீடு பிரித்தல் (Code Splitting)

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

React.lazy மற்றும் Suspense பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:


import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

இந்த எடுத்துக்காட்டில், MyComponent ஆனது React.lazy ஐப் பயன்படுத்தி ஒத்திசைவற்ற முறையில் ஏற்றப்படுகிறது. Suspense காம்போனென்ட், காம்போனென்ட் ஏற்றப்படும்போது ஒரு பின்னடைவு UI-ஐக் காட்டுகிறது.

5. மெய்நிகராக்கம் (Virtualization)

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

react-virtualized மற்றும் react-window போன்ற லைப்ரரிகள் ரியாக்ட் பயன்பாடுகளில் மெய்நிகராக்கத்தை செயல்படுத்துவதற்கான காம்போனென்டுகளை வழங்குகின்றன.

6. டிபவுன்சிங் மற்றும் த்ராட்லிங் (Debouncing and Throttling)

டிபவுன்சிங் மற்றும் த்ராட்லிங் ஆகியவை ஒரு செயல்பாடு செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்துவதற்கான நுட்பங்களாகும். டிபவுன்சிங் ஒரு குறிப்பிட்ட கால செயலற்ற நிலைக்குப் பிறகு ஒரு செயல்பாட்டின் செயல்பாட்டை தாமதப்படுத்துகிறது. த்ராட்லிங் ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு செயல்பாட்டை அதிகபட்சம் ஒரு முறை செயல்படுத்துகிறது.

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

உதாரணமாக, ஒரு உள்ளீட்டு நிகழ்வை டிபவுன்ஸ் செய்ய நீங்கள் lodash.debounce செயல்பாட்டைப் பயன்படுத்தலாம்:


import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = useCallback(
    debounce((event) => {
      setText(event.target.value);
    }, 300),
    []
  );

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default ExampleComponent;

இந்த எடுத்துக்காட்டில், handleChange செயல்பாடு 300 மில்லி விநாடிகள் தாமதத்துடன் டிபவுன்ஸ் செய்யப்படுகிறது. இதன் பொருள் பயனர் 300 மில்லி விநாடிகள் தட்டச்சு செய்வதை நிறுத்திய பின்னரே setText செயல்பாடு அழைக்கப்படும்.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்

ரியாக்ட் பேட்சிங் மற்றும் மேம்படுத்தல் நுட்பங்களின் நடைமுறை தாக்கத்தை விளக்க, சில நிஜ உலக எடுத்துக்காட்டுகளைக் கருத்தில் கொள்வோம்:

பேட்சிங் சிக்கல்களை சரிசெய்தல்

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

ஸ்டேட் புதுப்பிப்புகளை மேம்படுத்துவதற்கான சிறந்த நடைமுறைகள்

சுருக்கமாக, ரியாக்ட்டில் ஸ்டேட் புதுப்பிப்புகளை மேம்படுத்துவதற்கான சில சிறந்த நடைமுறைகள் இங்கே:

முடிவுரை

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

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