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

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

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

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

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

ஆட்டோமேட்டிக் பேட்சிங் ஏன் முக்கியமானது?

ஆட்டோமேட்டிக் பேட்சிங் பல முக்கிய நன்மைகளை வழங்குகிறது:

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

ஆட்டோமேட்டிக் பேட்சிங் எப்படி வேலை செய்கிறது

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

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

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

  function handleClick() {
    setTimeout(() => {
      setCount1(count1 + 1);
      setCount2(count2 + 1);
    }, 0);
  }

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

            

              
                Copy
              
            
          

ரியாக்ட் 18-க்கு முன்பு, பட்டனைக் கிளிக் செய்தால் இரண்டு ரீ-ரெண்டர்கள் ஏற்படும்: ஒன்று setCount1 க்கும் மற்றொன்று setCount2 க்கும். ரியாக்ட் 18-ல் உள்ள ஆட்டோமேட்டிக் பேட்சிங் மூலம், இரண்டு ஸ்டேட் அப்டேட்களும் ஒன்றாக பேட்ச் செய்யப்பட்டு, ஒரே ஒரு ரீ-ரெண்டர் மட்டுமே ஏற்படுகிறது.

ஆட்டோமேட்டிக் பேட்சிங் செயல்பாட்டில் உள்ள எடுத்துக்காட்டுகள்

1. அசிங்க்ரோனஸ் அப்டேட்கள்

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

            function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

            

              
                Copy
              
            
          

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

2. ப்ராமிஸ்கள்

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

            function PromiseComponent() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise resolved!');
        } else {
          reject('Promise rejected!');
        }
      }, 1000);
    });

    myPromise
      .then((value) => {
        setResult(value);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setResult(null);
      });
  }, []);

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (result) {
    return <p>Result: {result}</p>;
  }

  return <p>Loading...</p>;
}

            

              
                Copy
              
            
          

இந்த நிலையில், வெற்றி பெற்றால் setResult மற்றும் setError(null) அழைக்கப்படும் அல்லது தோல்வியுற்றால் setError மற்றும் setResult(null) அழைக்கப்படும். எதுவாக இருந்தாலும், ஆட்டோமேட்டிக் பேட்சிங் இவற்றை ஒரே ரீ-ரெண்டரில் இணைக்கும்.

3. நேட்டிவ் ஈவென்ட் ஹேண்ட்லர்கள்

சில நேரங்களில், ரியாக்ட்டின் சிந்தெடிக் ஈவென்ட் ஹேண்ட்லர்களுக்குப் பதிலாக நேட்டிவ் ஈவென்ட் ஹேண்ட்லர்களை (உதாரணமாக, addEventListener) பயன்படுத்த வேண்டியிருக்கலாம். இந்த நிகழ்வுகளிலும் ஆட்டோமேட்டிக் பேட்சிங் வேலை செய்கிறது.

            function NativeEventHandlerComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <p>Scroll Position: {scrollPosition}</p>;
}

            

              
                Copy
              
            
          

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

ஆட்டோமேட்டிக் பேட்சிங்கிலிருந்து விலகுதல்

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

குறிப்பு: flushSync பயன்படுத்துவது செயல்திறனை எதிர்மறையாகப் பாதிக்கக்கூடும் என்பதால், அதை குறைவாகவே பயன்படுத்த வேண்டும். முடிந்தவரை ஆட்டோமேட்டிக் பேட்சிங்கை நம்பியிருப்பதே பொதுவாகச் சிறந்தது.

            import { flushSync } from 'react-dom';

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

  function handleClick() {
    flushSync(() => {
      setCount(count + 1);
    });
  }

  return (<button onClick={handleClick}>Increment</button>);
}

            

              
                Copy
              
            
          

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

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

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

• ஃபங்ஷனல் அப்டேட்களைப் பயன்படுத்துங்கள்: முந்தைய ஸ்டேட்டை அடிப்படையாகக் கொண்டு ஸ்டேட்டைப் புதுப்பிக்கும்போது, பழைய ஸ்டேட் தொடர்பான சிக்கல்களைத் தவிர்க்க ஃபங்ஷனல் அப்டேட்களை (அதாவது, ஸ்டேட் செட்டருக்கு ஒரு ஃபங்ஷனை அனுப்புதல்) பயன்படுத்தவும்.
• தேவையற்ற ஸ்டேட் அப்டேட்களைத் தவிர்க்கவும்: தேவைப்படும்போது மட்டுமே ஸ்டேட்டைப் புதுப்பிக்கவும். அதே மதிப்புடன் ஸ்டேட்டைப் புதுப்பிப்பதைத் தவிர்க்கவும்.
• காம்போனென்ட்களை மெமோயிஸ் செய்யுங்கள்: காம்போனென்ட்களை மெமோயிஸ் செய்து தேவையற்ற ரீ-ரெண்டர்களைத் தடுக்க React.memo-ஐப் பயன்படுத்தவும்.
• `useCallback` மற்றும் `useMemo` பயன்படுத்தவும்: சைல்ட் காம்போனென்ட்கள் தேவையற்ற முறையில் ரீ-ரெண்டர் ஆவதைத் தடுக்க, ப்ராப்ஸ்களாக அனுப்பப்படும் ஃபங்ஷன்கள் மற்றும் மதிப்புகளை மெமோயிஸ் செய்யவும்.
• `shouldComponentUpdate` உடன் ரீ-ரெண்டர்களை மேம்படுத்துங்கள் (கிளாஸ் காம்போனென்ட்கள்): ஃபங்ஷனல் காம்போனென்ட்கள் மற்றும் ஹூக்குகள் இப்போது பரவலாக இருந்தாலும், நீங்கள் பழைய கிளாஸ்-அடிப்படையிலான காம்போனென்ட்களுடன் பணிபுரிகிறீர்கள் என்றால், ப்ராப் மற்றும் ஸ்டேட் மாற்றங்களின் அடிப்படையில் ஒரு காம்போனென்ட் எப்போது ரீ-ரெண்டர் செய்ய வேண்டும் என்பதைக் கட்டுப்படுத்த shouldComponentUpdate-ஐச் செயல்படுத்தவும்.
• உங்கள் அப்ளிகேஷனைப் ப்ரொஃபைல் செய்யுங்கள்: உங்கள் அப்ளிகேஷனைப் ப்ரொஃபைல் செய்யவும் மற்றும் செயல்திறன் சிக்கல்களைக் கண்டறியவும் ரியாக்ட் டெவ்டூல்ஸைப் பயன்படுத்தவும்.
• இம்யூட்டபிலிட்டியை கருத்தில் கொள்ளுங்கள்: குறிப்பாக ஆப்ஜெக்ட்கள் மற்றும் அரேக்களைக் கையாளும்போது, ஸ்டேட்டை மாற்ற முடியாததாக (immutable) கருதுங்கள். தரவை நேரடியாக மாற்றுவதற்குப் பதிலாக புதிய நகல்களை உருவாக்கவும். இது மாற்றத்தைக் கண்டறிவதை மிகவும் திறமையானதாக ஆக்குகிறது.

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

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

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

முடிவுரை

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