ரியாக்ட் useRef: மாற்றக்கூடிய மதிப்பு சேமிப்பு முறைகளில் தேர்ச்சி பெறுதல்

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

useRef-ஐப் புரிந்துகொள்ளுதல்: DOM அணுகலை விட மேலானது

அதன் மையத்தில், useRef ஒரு மாற்றக்கூடிய ref பொருளைத் திருப்பித் தருகிறது, அதன் .current பண்பு அனுப்பப்பட்ட தருமதிப்புடன் (initialValue) தொடங்கப்படுகிறது. திரும்பப் பெறப்பட்ட பொருள் கூறின் முழு ஆயுட்காலத்திற்கும் நீடிக்கும். முக்கியமாக, .current பண்பை மாற்றுவது ஒரு மறு-ரெண்டரைத் தூண்டாது. இதுவே useRef மற்றும் useState-க்கு இடையிலான முக்கிய வேறுபாடு ஆகும்.

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

• முந்தைய prop அல்லது state மதிப்புகளைச் சேமித்தல்.
• கவுண்டர்கள் அல்லது டைமர்களைப் பராமரித்தல்.
• மறு-ரெண்டர்களை ஏற்படுத்தாமல் ஃபோகஸ் நிலையை கண்காணித்தல்.
• ரெண்டர்களுக்கு இடையில் நிலைத்திருக்க வேண்டிய எந்த மாற்றக்கூடிய மதிப்பையும் சேமித்தல்.

அடிப்படைப் பயன்பாடு: DOM கூறுகளை அணுகுதல்

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

எடுத்துக்காட்டு: ஒரு உள்ளீட்டுப் புலத்தில் ஃபோகஸ் செய்தல்

ஒரு கூறு மவுண்ட் ஆகும்போது ஒரு உள்ளீட்டுப் புலத்தில் ஃபோகஸ் செய்ய useRef-ஐ நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

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

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input field on mount
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // Empty dependency array ensures this runs only once on mount

  return (
    <input type="text" ref={inputRef} placeholder="Enter text" />
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

விளக்கம்:

1. நாம் useRef(null)-ஐப் பயன்படுத்தி ஒரு ref-ஐ உருவாக்குகிறோம். ஆரம்பத்தில் கூறு ரெண்டர் செய்யப்படும்போது உள்ளீட்டுக் கூறு இன்னும் இல்லாததால், ஆரம்ப மதிப்பு null ஆகும்.
2. நாம் ref prop-ஐப் பயன்படுத்தி ref-ஐ உள்ளீட்டுக் கூறில் இணைக்கிறோம்: ref={inputRef}. உள்ளீட்டுக் கூறு மவுண்ட் செய்யப்படும்போது ரியாக்ட் தானாகவே inputRef.current-ஐ DOM நோடிற்கு அமைக்கும்.
3. கூறு மவுண்ட் ஆன பிறகு இந்த எஃபெக்ட் ஒருமுறை மட்டுமே இயங்குவதை உறுதிசெய்ய, காலி சார்பு வரிசையுடன் ([]) useEffect-ஐப் பயன்படுத்துகிறோம்.
4. எஃபெக்ட்டின் உள்ளே, நாம் inputRef.current இருக்கிறதா என்று சரிபார்த்து (கூறு இன்னும் கிடைக்கவில்லை என்றால் பிழைகளைத் தவிர்க்க), பின்னர் உள்ளீட்டுப் புலத்தில் ஃபோகஸ் செய்ய inputRef.current.focus()-ஐ அழைக்கிறோம்.

DOM அணுகலுக்கு அப்பால்: மாற்றக்கூடிய மதிப்புகளை நிர்வகித்தல்

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

எடுத்துக்காட்டு: முந்தைய Prop அல்லது State மதிப்புகளைச் சேமித்தல்

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

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

function MyComponent({ value }) {
  const previousValue = useRef(value);

  useEffect(() => {
    // Update the ref's .current property with the current value
    previousValue.current = value;
  }, [value]); // Effect runs whenever the 'value' prop changes

  // Now you can access the previous value using previousValue.current
  return (
    <div>
      Current value: {value}
      <br />
      Previous value: {previousValue.current}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

விளக்கம்:

1. நாம் previousValue என்ற ref-ஐ value prop-இன் ஆரம்ப மதிப்புடன் தொடங்குகிறோம்.
2. value prop மாறும்போதெல்லாம் previousValue.current பண்பைப் புதுப்பிக்க useEffect-ஐப் பயன்படுத்துகிறோம்.
3. கூறின் உள்ளே, நாம் இப்போது previousValue.current-ஐப் பயன்படுத்தி value prop-இன் முந்தைய மதிப்பை அணுகலாம்.

பயன்பாட்டு நிகழ்வு எடுத்துக்காட்டு: API பதில்களில் ஏற்படும் மாற்றங்களைக் கண்காணித்தல் (சர்வதேசச் சூழல்)

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

எடுத்துக்காட்டு: கவுண்டர்கள் அல்லது டைமர்களைப் பராமரித்தல்

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

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const clickCount = useRef(0); // Initialize the ref with 0

  const handleClick = () => {
    clickCount.current++; // Increment the ref's .current property
    setCount(clickCount.current); //Increment state which re-renders.
  };

  return (
    <div>
      <p>Button clicked: {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

விளக்கம்:

1. நாம் clickCount என்ற ref-ஐ 0 மதிப்புடன் தொடங்குகிறோம்.
2. handleClick செயல்பாட்டில், நாம் clickCount.current பண்பை அதிகரிக்கிறோம். இது ஒரு மறு-ரெண்டரைத் தூண்டாது.
3. நாம் 'count' நிலையையும் புதுப்பிக்கிறோம், இது ஒரு மறு-ரெண்டரைத் தூண்டுகிறது.

எடுத்துக்காட்டு: ஒரு Debounce செயல்பாட்டைச் செயல்படுத்துதல்

Debouncing என்பது ஒரு செயல்பாடு செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்தப் பயன்படுத்தப்படும் ஒரு நுட்பமாகும். பயனர் தட்டச்சு செய்யும்போது அதிகப்படியான API அழைப்புகளைத் தடுக்க இது பொதுவாக தேடல் உள்ளீட்டுப் புலங்களில் பயன்படுத்தப்படுகிறது. Debounce செயல்பாட்டில் பயன்படுத்தப்படும் டைமர் ஐடியைச் சேமிக்க useRef-ஐப் பயன்படுத்தலாம்.

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

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const timerRef = useRef(null); // Store the timer ID

  const handleChange = (event) => {
    const newSearchTerm = event.target.value;
    setSearchTerm(newSearchTerm);

    // Clear the previous timer if it exists
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // Set a new timer
    timerRef.current = setTimeout(() => {
      // Simulate an API call
      fetch(`https://api.example.com/search?q=${newSearchTerm}`)
        .then(response => response.json())
        .then(data => setResults(data.results));
    }, 300); // Debounce for 300 milliseconds
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

விளக்கம்:

1. டைமர் ஐடியை timerRef-இல் சேமிக்க நாம் useRef-ஐப் பயன்படுத்துகிறோம்.
2. handleChange செயல்பாட்டில், முந்தைய டைமரை (அது இருந்தால்) clearTimeout(timerRef.current)-ஐப் பயன்படுத்தி அழிக்கிறோம்.
3. பின்னர் நாம் setTimeout-ஐப் பயன்படுத்தி ஒரு புதிய டைமரை அமைத்து, டைமர் ஐடியை timerRef.current-இல் சேமிக்கிறோம்.
4. பயனர் 300 மில்லி விநாடிகளுக்கு தட்டச்சு செய்வதை நிறுத்திய பின்னரே API அழைப்பு செய்யப்படுகிறது.

சர்வதேசமயமாக்கல் பரிசீலனைகள்: வெவ்வேறு மொழிகளில் தகவல்களைக் காண்பிக்கும் API அழைப்புகளுடன் debouncing-ஐ செயல்படுத்தும்போது, உங்கள் API சர்வதேசமயமாக்கலை ஆதரிக்கிறதா என்பதையும், பயனரின் விருப்பமான மொழியில் தரவைத் திருப்பித் தருகிறதா என்பதையும் உறுதிப்படுத்திக் கொள்ளுங்கள். உங்கள் API கோரிக்கைகளில் Accept-Language ஹெட்டரைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு: மறு-ரெண்டர்கள் இல்லாமல் ஃபோகஸ் நிலையைக் கண்காணித்தல்

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

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

function MyComponent() {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input
        type="text"
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <p>Input is focused: {isFocused ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

useRef மற்றும் useState: சரியான கருவியைத் தேர்ந்தெடுத்தல்

வேலைக்கு சரியான கருவியைத் தேர்வு செய்ய useRef மற்றும் useState-க்கு இடையிலான முக்கிய வேறுபாடுகளைப் புரிந்துகொள்வது முக்கியம்.

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

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

மேம்பட்ட பயன்பாட்டு நிகழ்வுகள் மற்றும் முறைகள்

கூறு நிகழ்வுகளுக்கு இடையில் மதிப்புகளை நிலைநிறுத்துதல்

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

            // myComponent.js
let globalCounter = 0; // Module-level variable

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

function MyComponent() {
  const counterRef = useRef(globalCounter); // Initialize with the global value

  useEffect(() => {
    // Update the global counter whenever the ref changes
    globalCounter = counterRef.current;
  }, [counterRef.current]);

  const increment = () => {
    counterRef.current++;
    //No setState needed, so no re-render
  };

  return (
    <div>
      <p>Counter: {counterRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

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

முடிவுரை: useRef-இன் ஆற்றலை வெளிக்கொணர்தல்

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

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