React Ref சுத்தம் செய்தல்: குறிப்பு வாழ்க்கை சுழற்சி நிர்வாகத்தில் தேர்ச்சி பெறுதல்

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

React Refs-ஐ புரிந்து கொள்ளுதல்

சுத்தம் செய்யும் முறைகளை ஆராய்வதற்கு முன், React refs என்றால் என்ன, அவை எவ்வாறு செயல்படுகின்றன என்பதைப் பற்றிய ஒரு உறுதியான புரிதல் இருப்பது அவசியம். Refs DOM nodes அல்லது React elements-ஐ நேரடியாக அணுகுவதற்கான வழியை வழங்குகிறது. அவை பொதுவாக DOM-ஐ நேரடியாகக் கையாள வேண்டிய பணிகளுக்குப் பயன்படுத்தப்படுகின்றன, அவை:

• கவனம், உரை தேர்வு அல்லது மீடியா பிளேபேக்கைக் கையாளுதல்.
• கட்டாய அனிமேஷன்களைத் தூண்டுதல்.
• மூன்றாம் தரப்பு DOM libraries-உடன் ஒருங்கிணைத்தல்.

செயல்பாட்டு கூறுகளில், useRef hook refs-ஐ உருவாக்கி நிர்வகிப்பதற்கான முதன்மை வழிமுறையாகும். useRef என்பது மாற்றக்கூடிய ref பொருளை வழங்குகிறது, இதன் .current சொத்து அனுப்பப்பட்ட வாதத்திற்குத் தொடங்கப்படுகிறது (ஆரம்பத்தில் DOM refs-க்கு null). இந்த .current சொத்து ஒரு DOM element அல்லது ஒரு கூறு நிகழ்வுக்கு ஒதுக்கப்படலாம், இது அதை நேரடியாக அணுக உங்களை அனுமதிக்கிறது.

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

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Explicitly focus the text input using the raw DOM API
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };

  return (
    <>
      
      Focus the input
    
  );
}

export default TextInputWithFocusButton;

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், inputEl.current கூறு ஏற்றப்பட்டதும் <input> DOM node-க்கான குறிப்பை வைத்திருக்கும். பொத்தான் கிளிக் கையாளுபவர் பின்னர் இந்த DOM node-இல் focus() முறையை நேரடியாக அழைக்கிறார்.

Ref சுத்தம் செய்தலின் அவசியம்

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

சுத்தம் செய்யத் தவறினால் பல சிக்கல்கள் ஏற்படலாம்:

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

Ref சுத்தம் செய்வதற்கான முக்கிய React முறைகள்

React அதன் Hooks API-க்குள் சக்திவாய்ந்த கருவிகளை வழங்குகிறது, முக்கியமாக useEffect, பக்க விளைவுகள் மற்றும் அவற்றின் சுத்தம் ஆகியவற்றை நிர்வகிக்க. useEffect hook என்பது வழங்கிய பிறகு செய்ய வேண்டிய செயல்பாடுகளைக் கையாள வடிவமைக்கப்பட்டுள்ளது, மேலும் முக்கியமாக, இது சுத்தம் செய்யும் செயல்பாட்டைத் திருப்பித் தருவதற்கான உள்ளமைக்கப்பட்ட வழிமுறையை வழங்குகிறது.

1. useEffect சுத்தம் செய்யும் செயல்பாடு முறை

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

காட்சி: நிகழ்வு கேட்பவர் சுத்தம்

ஒரு ref-ஐப் பயன்படுத்தி ஒரு குறிப்பிட்ட DOM element-க்கு scroll நிகழ்வு கேட்பவரை இணைக்கும் ஒரு கூறைக் கவனியுங்கள்:

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

function ScrollTracker() {
  const scrollContainerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      if (scrollContainerRef.current) {
        console.log('Scroll position:', scrollContainerRef.current.scrollTop);
      }
    };

    const element = scrollContainerRef.current;
    if (element) {
      element.addEventListener('scroll', handleScroll);
    }

    // Cleanup function
    return () => {
      if (element) {
        element.removeEventListener('scroll', handleScroll);
        console.log('Scroll listener removed.');
      }
    };
  }, []); // Empty dependency array means this effect runs only once on mount and cleans up on unmount

  return (
    <
      ref={scrollContainerRef}
      style={{ height: '200px', overflowY: 'scroll', border: '1px solid black' }}
    >
      
        Scroll me!
      
    
  );
}

export default ScrollTracker;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• scoll செய்யக்கூடிய div-ஐக் குறிக்க scrollContainerRef-ஐ வரையறுக்கிறோம்.
• useEffect-க்குள், handleScroll செயல்பாட்டை வரையறுக்கிறோம்.
• scrollContainerRef.current-ஐப் பயன்படுத்தி DOM element-ஐப் பெறுகிறோம்.
• இந்த உறுப்புக்கு 'scroll' நிகழ்வு கேட்பவரைச் சேர்க்கிறோம்.
• முக்கியமாக, ஒரு சுத்தம் செய்யும் செயல்பாட்டைத் தருகிறோம். இந்தச் செயல்பாடு நிகழ்வு கேட்பவரை அகற்றுவதற்குப் பொறுப்பாகும். கேட்பவரை அகற்ற முயற்சிக்கும் முன் element உள்ளதா என்பதையும் இது சரிபார்க்கிறது, இது நல்ல பயிற்சி.
• வெற்று சார்பு வரிசை ([]) விளைவு ஆரம்ப ரெண்டருக்குப் பிறகு ஒரு முறை மட்டுமே இயங்கும் என்பதையும், கூறு பிரிக்கப்படும்போது சுத்தம் செய்யும் செயல்பாடு ஒரு முறை மட்டுமே இயங்கும் என்பதையும் உறுதி செய்கிறது.

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

காட்சி: மூன்றாம் தரப்பு ஒருங்கிணைப்புகளை சுத்தம் செய்தல்

நீங்கள் ஒரு வரைபட நூலகத்தை ஒருங்கிணைக்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள், இது நேரடி DOM கையாளுதல் மற்றும் ref-ஐப் பயன்படுத்தி துவக்க வேண்டும்:

            import React, { useRef, useEffect } from 'react';
// Assume 'SomeChartLibrary' is a hypothetical charting library
// import SomeChartLibrary from 'some-chart-library';

function ChartComponent({ data }) {
  const chartContainerRef = useRef(null);
  const chartInstanceRef = useRef(null); // To store the chart instance

  useEffect(() => {
    const initializeChart = () => {
      if (chartContainerRef.current) {
        // Hypothetical initialization:
        // chartInstanceRef.current = new SomeChartLibrary(chartContainerRef.current, {
        //   data: data
        // });
        console.log('Chart initialized with data:', data);
        chartInstanceRef.current = { destroy: () => console.log('Chart destroyed') }; // Mock instance
      }
    };

    initializeChart();

    // Cleanup function
    return () => {
      if (chartInstanceRef.current) {
        // Hypothetical cleanup:
        // chartInstanceRef.current.destroy();
        chartInstanceRef.current.destroy(); // Call the destroy method of the chart instance
        console.log('Chart instance cleaned up.');
      }
    };
  }, [data]); // Re-initialize chart if 'data' prop changes

  return (
    

      {/* Chart will be rendered here by the library */}
    
  );
}

export default ChartComponent;

            

              
                Copy
              
            
          

இந்த விஷயத்தில்:

• chartContainerRef வரைபடம் வழங்கப்படவுள்ள DOM element-ஐ சுட்டிக்காட்டுகிறது.
• chartInstanceRef என்பது வரைபட நூலகத்தின் நிகழ்வை சேமிக்க பயன்படுகிறது, இது பெரும்பாலும் அதன் சொந்த சுத்தம் செய்யும் முறையைக் கொண்டுள்ளது (எ.கா., destroy()).
• useEffect hook ஏற்றத்தில் வரைபடத்தை துவக்குகிறது.
• சுத்தம் செய்யும் செயல்பாடு முக்கியமானது. வரைபட நிகழ்வு இருந்தால், அதன் destroy() முறை அழைக்கப்படுவதை உறுதி செய்கிறது. இது தனிமைப்படுத்தப்பட்ட DOM nodes அல்லது நடந்து கொண்டிருக்கும் உள் செயல்முறைகள் போன்ற வரைபட நூலகத்தால் ஏற்படும் நினைவக கசிவுகளைத் தடுக்கிறது.
• சார்பு வரிசையில் [data] அடங்கும். இதன் பொருள், data ப்ராப் மாறினால், விளைவு மீண்டும் இயக்கப்படும்: முந்தைய ரெண்டரில் இருந்து சுத்தம் செயல்படுத்தப்படும், அதைத் தொடர்ந்து புதிய தரவுடன் மீண்டும் துவக்கப்படும். இது வரைபடம் எப்போதும் சமீபத்திய தரவை பிரதிபலிக்கும் என்பதையும், வளங்கள் புதுப்பிப்புகள் முழுவதும் நிர்வகிக்கப்படுவதையும் உறுதி செய்கிறது.

2. மாற்றக்கூடிய மதிப்புகள் மற்றும் வாழ்க்கை சுழற்சிகளுக்கு useRef

DOM குறிப்புகளுக்கு அப்பால், useRef என்பது மீண்டும் ரெண்டர்களை ஏற்படுத்தாமல் ரெண்டர்கள் முழுவதும் நீடிக்கும் மாற்றக்கூடிய மதிப்புகளை சேமிப்பதற்கும், வாழ்க்கை சுழற்சி சார்ந்த தரவை நிர்வகிப்பதற்கும் சிறந்தது.

ஒரு கூறு தற்போது ஏற்றப்பட்டுள்ளதா என்பதை நீங்கள் கண்காணிக்க விரும்பும் ஒரு சூழ்நிலையை கவனியுங்கள்:

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

function MyComponent() {
  const isMounted = useRef(false);
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    isMounted.current = true; // Set to true when mounted

    const timerId = setTimeout(() => {
      if (isMounted.current) { // Check if still mounted before updating state
        setMessage('Data loaded!');
      }
    }, 2000);

    // Cleanup function
    return () => {
      isMounted.current = false; // Set to false when unmounting
      clearTimeout(timerId); // Clear the timeout as well
      console.log('Component unmounted and timeout cleared.');
    };
  }, []);

  return (
    
      
{message}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

இங்கே:

• isMounted ref ஏற்றும் நிலையை கண்காணிக்கிறது.
• கூறு ஏற்றப்படும்போது, isMounted.current true ஆக அமைக்கப்படுகிறது.
• setTimeout callback, நிலையை புதுப்பிக்கும் முன் isMounted.current-ஐ சரிபார்க்கிறது. இது ஒரு பொதுவான React எச்சரிக்கையைத் தடுக்கிறது: 'ஏற்றப்படாத கூறில் React நிலை புதுப்பிப்பைச் செய்ய முடியாது.'
• சுத்தம் செய்யும் செயல்பாடு isMounted.current-ஐ மீண்டும் false-க்கு அமைக்கிறது மற்றும் setTimeout-ஐயும் அழிக்கிறது, கூறு பிரிக்கப்பட்ட பிறகு காலக்கெடு callback செயல்படுவதைத் தடுக்கிறது.

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

3. நிபந்தனை ரெண்டரிங் மற்றும் Ref மேலாண்மை

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

நிபந்தனையுடன் வழங்கப்பட்ட ஒரு modal கூறைக் கவனியுங்கள்:

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

function Modal({ isOpen, onClose, children }) {
  const modalRef = useRef(null);

  useEffect(() => {
    const handleOutsideClick = (event) => {
      // Check if the click was outside the modal content and not on the modal overlay itself
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleOutsideClick);
    }

    // Cleanup function
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
      console.log('Modal click listener removed.');
    };
  }, [isOpen, onClose]); // Re-run effect if isOpen or onClose changes

  if (!isOpen) {
    return null;
  }

  return (
    
      
        
          {children}
          Close
        
      
    
  );
}

export default Modal;

            

              
                Copy
              
            
          

இந்த Modal கூறில்:

• modalRef modal-ன் உள்ளடக்க div உடன் இணைக்கப்பட்டுள்ளது.
• ஒரு விளைவு modal-க்கு வெளியே கிளிக்குகளைக் கண்டறிய உலகளாவிய 'mousedown' கேட்பவரைச் சேர்க்கிறது.
• isOpen true ஆக இருக்கும்போது மட்டுமே கேட்பவர் சேர்க்கப்படுகிறார்.
• கூறு பிரிக்கப்படும்போது அல்லது isOpen false ஆகும்போது கேட்பவர் அகற்றப்படுவதை சுத்தம் செய்யும் செயல்பாடு உறுதி செய்கிறது (ஏனெனில் விளைவு மீண்டும் இயங்குகிறது). modal காணப்படாமல் இருக்கும்போது கேட்பவர் நீடிப்பதைத் இது தடுக்கிறது.
• !modalRef.current.contains(event.target) என்ற சோதனை modal-ன் உள்ளடக்கப் பகுதிக்கு வெளியே நடக்கும் கிளிக்குகளைச் சரியாகக் கண்டறியும்.

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

மேம்பட்ட காட்சிகள் மற்றும் பரிசீலனைகள்

1. தனிப்பயன் Hooks-இல் Refs

refs-ஐப் பயன்படுத்தி சுத்தம் செய்ய வேண்டிய தனிப்பயன் hooks-ஐ உருவாக்கும்போது, அதே கொள்கைகள் பொருந்தும். உங்கள் தனிப்பயன் hook அதன் உள் useEffect-இல் இருந்து சுத்தம் செய்யும் செயல்பாட்டைத் திருப்ப வேண்டும்.

            import { useRef, useEffect } from 'react';

function useClickOutside(ref, callback) {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    // Cleanup function
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref, callback]); // Dependencies ensure effect re-runs if ref or callback changes
}

export default useClickOutside;

            

              
                Copy
              
            
          

இந்த தனிப்பயன் hook, useClickOutside, நிகழ்வு கேட்பவரின் வாழ்க்கைச் சுழற்சியை நிர்வகிக்கிறது, இது மீண்டும் பயன்படுத்தக்கூடியதாகவும் சுத்தமாகவும் இருக்கும்.

2. பல சார்புகளுடன் சுத்தம் செய்தல்

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

உதாரணமாக, ஒரு ref ஒரு WebSocket இணைப்பை நிர்வகிக்கப் பயன்படுத்தப்பட்டால்:

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

function WebSocketComponent({ url }) {
  const wsRef = useRef(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Establish WebSocket connection
    wsRef.current = new WebSocket(url);
    console.log(`Connecting to WebSocket: ${url}`);

    wsRef.current.onmessage = (event) => {
      setMessage(event.data);
    };

    wsRef.current.onopen = () => {
      console.log('WebSocket connection opened.');
    };

    wsRef.current.onclose = () => {
      console.log('WebSocket connection closed.');
    };

    wsRef.current.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    // Cleanup function
    return () => {
      if (wsRef.current) {
        wsRef.current.close(); // Close the WebSocket connection
        console.log(`WebSocket connection to ${url} closed.`);
      }
    };
  }, [url]); // Reconnect if the URL changes

  return (
    
      
WebSocket Messages:
      
{message}
    
  );
}

export default WebSocketComponent;

            

              
                Copy
              
            
          

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

3. முந்தைய மதிப்புகளைக் குறிப்பிடுதல்

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

முந்தைய மதிப்புகளைக் கண்காணிப்பதற்கான ஒரு பொதுவான முறை:

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

function PreviousValueTracker({ value }) {
  const currentValueRef = useRef(value);
  const previousValueRef = useRef();

  useEffect(() => {
    previousValueRef.current = currentValueRef.current;
    currentValueRef.current = value;
  }); // Runs after every render

  const previousValue = previousValueRef.current;

  return (
    
      
Current Value: {value}
      
Previous Value: {previousValue}
    
  );
}

export default PreviousValueTracker;

            

              
                Copy
              
            
          

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

Ref சுத்தம் செய்வதற்கான சிறந்த நடைமுறைகள்

வலுவான குறிப்பு மேலாண்மையை உறுதி செய்வதற்கும் சிக்கல்களைத் தடுப்பதற்கும்:

• எப்போதும் சுத்தம் செய்யுங்கள்: நீங்கள் ஒரு சந்தா, டைமர் அல்லது ref-ஐப் பயன்படுத்தும் நிகழ்வு கேட்பவரை அமைத்தால், அதை பிரிக்கவோ அல்லது அழிக்கவோ useEffect-இல் ஒரு சுத்தம் செய்யும் செயல்பாட்டை வழங்க உறுதிப்படுத்திக் கொள்ளுங்கள்.
• இருப்பைச் சரிபார்க்கவும்: உங்கள் சுத்தம் செய்யும் செயல்பாடுகள் அல்லது நிகழ்வு கையாளுபவர்களில் ref.current-ஐ அணுகுவதற்கு முன், அது இருக்கிறதா (null அல்லது undefined அல்ல) என்பதை எப்போதும் சரிபார்க்கவும். DOM element ஏற்கனவே அகற்றப்பட்டிருந்தால் இது பிழைகளைத் தடுக்கிறது.
• சார்பு வரிசைகளைச் சரியாகப் பயன்படுத்தவும்: உங்கள் useEffect சார்பு வரிசைகள் துல்லியமாக இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். ஒரு விளைவு முட்டுகள் அல்லது நிலையைப் பொறுத்தவரை, அவற்றை வரிசையில் சேர்க்கவும். இது தேவையானபோது விளைவு மீண்டும் இயங்கும் என்பதையும், அதனுடன் தொடர்புடைய சுத்தம் செயல்படுத்தப்படும் என்பதையும் உறுதி செய்கிறது.
• நிபந்தனை ரெண்டரிங் குறித்து கவனமாக இருங்கள்: ஒரு ref நிபந்தனையுடன் வழங்கப்பட்ட ஒரு கூறுடன் இணைக்கப்பட்டிருந்தால், ref-ன் இலக்கு இல்லாத வாய்ப்புக்கான உங்கள் சுத்தம் செய்யும் தர்க்க கணக்குகளை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• தனிப்பயன் hooks-ஐப் பயன்படுத்தவும்: மீண்டும் பயன்படுத்தக்கூடிய மற்றும் பராமரிக்கக்கூடிய தன்மையை மேம்படுத்துவதற்காக சிக்கலான ref மேலாண்மை தர்க்கத்தை தனிப்பயன் hooks-க்குள் பொதிந்து வைக்கவும்.
• தேவையற்ற ref கையாளுதல்களைத் தவிர்க்கவும்: குறிப்பிட்ட கட்டாய பணிகளுக்கு மட்டும் refs-ஐப் பயன்படுத்தவும். பெரும்பாலான நிலை மேலாண்மை தேவைகளுக்கு, React-ன் நிலை மற்றும் முட்டுகள் போதுமானவை.

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

• சுத்தம் செய்வதை மறப்பது: வெளிப்புற வளங்களை நிர்வகிக்கும்போது useEffect-இல் இருந்து சுத்தம் செய்யும் செயல்பாட்டைத் திருப்ப மறப்பதே மிகவும் பொதுவான தவறு.
• தவறான சார்பு வரிசைகள்: வெற்று சார்பு வரிசை (`[]`) என்பது விளைவு ஒரு முறை மட்டுமே இயங்கும் என்று பொருள். உங்கள் ref-ன் இலக்கு அல்லது தொடர்புடைய தர்க்கம் மாறும் மதிப்புகளைப் பொறுத்திருந்தால், அவற்றை வரிசையில் சேர்க்க வேண்டும்.
• விளைவு இயங்குவதற்கு முன் சுத்தம் செய்தல்: சுத்தம் செய்யும் செயல்பாடு விளைவு மீண்டும் இயங்குவதற்கு முன் இயங்குகிறது. உங்கள் சுத்தம் செய்யும் தர்க்கம் நடப்பு விளைவின் அமைப்பைப் பொறுத்தவரை, அது சரியாகக் கையாளப்படுவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• refs இல்லாமல் DOM-ஐ நேரடியாகக் கையாளுதல்: கட்டாயமாக DOM elements உடன் நீங்கள் தொடர்பு கொள்ள வேண்டியிருக்கும்போது எப்போதும் refs-ஐப் பயன்படுத்தவும்.

முடிவுரை

செயல்திறன்மிக்க, நிலையான மற்றும் நினைவக கசிவு இல்லாத பயன்பாடுகளை உருவாக்குவதற்கு React-ன் ref சுத்தம் செய்யும் முறைகளில் தேர்ச்சி பெறுவது அடிப்படையானது. useEffect hook-இன் சுத்தம் செய்யும் செயல்பாட்டின் சக்தியைப் பயன்படுத்துவதன் மூலமும், உங்கள் refs-ன் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொள்வதன் மூலமும், நீங்கள் நம்பிக்கையுடன் வளங்களை நிர்வகிக்கலாம், பொதுவான தவறுகளைத் தடுக்கலாம் மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்கலாம். இந்த முறைகளைத் தழுவி, சுத்தமான, நன்கு நிர்வகிக்கப்பட்ட குறியீட்டை எழுதி, உங்கள் React மேம்பாட்டுத் திறன்களை உயர்த்துங்கள்.

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