ரியாக்ட் ரெண்டர்: காம்போனென்ட் ரெண்டரிங் மற்றும் வாழ்க்கைச் சுழற்சி மேலாண்மை

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

ரியாக்ட் ரெண்டரிங் செயல்முறையைப் புரிந்துகொள்ளுதல்

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

விர்ச்சுவல் DOM மற்றும் சமரசம் (Reconciliation)

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

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

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

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

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

ரியாக்ட் மாற்றங்களை எவ்வாறு தீர்மானிக்கிறது: வேறுபாட்டுக் கண்டறியும் அல்காரிதம் (Diffing Algorithm)

ரியாக்ட்டின் வேறுபாட்டுக் கண்டறியும் அல்காரிதம் (diffing algorithm) சமரச செயல்முறையின் இதயமாகும். இது புதிய மற்றும் பழைய விர்ச்சுவல் DOM மரங்களை ஒப்பிட்டு வேறுபாடுகளைக் கண்டறிகிறது. இந்த அல்காரிதம் ஒப்பீட்டை மேம்படுத்த பல அனுமானங்களைச் செய்கிறது:

• வெவ்வேறு வகையான இரண்டு எலிமெண்ட்டுகள் வெவ்வேறு மரங்களை உருவாக்கும். ரூட் எலிமெண்ட்டுகள் வெவ்வேறு வகைகளைக் கொண்டிருந்தால் (உதாரணமாக, ஒரு <div>-ஐ ஒரு <span> ஆக மாற்றுவது), ரியாக்ட் பழைய மரத்தை அன்மவுண்ட் செய்துவிட்டு புதிய மரத்தை புதிதாக உருவாக்கும்.
• ஒரே வகையான இரண்டு எலிமெண்ட்டுகளை ஒப்பிடும்போது, மாற்றங்கள் உள்ளதா என்பதைத் தீர்மானிக்க ரியாக்ட் அவற்றின் பண்புகளை (attributes) பார்க்கிறது. பண்புகள் மட்டுமே மாறியிருந்தால், ரியாக்ட் ஏற்கனவே உள்ள DOM நோடின் பண்புகளைப் புதுப்பிக்கும்.
• பட்டியல் உருப்படிகளைத் தனித்துவமாக அடையாளம் காண ரியாக்ட் ஒரு `key` ப்ராப்பைப் பயன்படுத்துகிறது. ஒரு `key` ப்ராப்பை வழங்குவது, முழு பட்டியலையும் மீண்டும் ரெண்டர் செய்யாமல் பட்டியல்களைத் திறமையாகப் புதுப்பிக்க ரியாக்ட்டை அனுமதிக்கிறது.

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

ரியாக்ட் காம்போனென்ட் வாழ்க்கைச் சுழற்சி

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

கிளாஸ் காம்போனென்ட்களில் வாழ்க்கைச் சுழற்சி மெத்தட்கள்

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

• constructor(props): காம்போனென்ட் மவுண்ட் செய்யப்படுவதற்கு முன்பு அழைக்கப்படுகிறது. இது ஸ்டேட்டைத் துவக்கவும், நிகழ்வு கையாள்பவர்களை (event handlers) பிணைக்கவும் பயன்படுகிறது.
• static getDerivedStateFromProps(props, state): ஆரம்ப மவுண்ட் மற்றும் அடுத்தடுத்த புதுப்பிப்புகள் இரண்டிலும், ரெண்டரிங் செய்வதற்கு முன்பு அழைக்கப்படுகிறது. இது ஸ்டேட்டைப் புதுப்பிக்க ஒரு ஆப்ஜெக்ட்டை ரிட்டர்ன் செய்ய வேண்டும், அல்லது புதிய ப்ராப்ஸ்களுக்கு எந்த ஸ்டேட் புதுப்பிப்புகளும் தேவையில்லை என்பதைக் குறிக்க null-ஐ ரிட்டர்ன் செய்ய வேண்டும். இந்த மெத்தட் ப்ராப்ஸ் மாற்றங்களின் அடிப்படையில் கணிக்கக்கூடிய ஸ்டேட் புதுப்பிப்புகளை ஊக்குவிக்கிறது.
• render(): ரெண்டர் செய்ய வேண்டிய JSX-ஐ ரிட்டர்ன் செய்யும் அவசியமான மெத்தட். இது ப்ராப்ஸ் மற்றும் ஸ்டேட்டின் ஒரு தூய செயல்பாடாக (pure function) இருக்க வேண்டும்.
• componentDidMount(): ஒரு காம்போனென்ட் மவுண்ட் செய்யப்பட்ட உடனேயே (மரத்தில் செருகப்பட்டவுடன்) அழைக்கப்படுகிறது. இது டேட்டாவைப் பெறுவது அல்லது சந்தாக்களை அமைப்பது போன்ற பக்க விளைவுகளை (side effects) செய்ய ஒரு நல்ல இடம்.
• shouldComponentUpdate(nextProps, nextState): புதிய ப்ராப்ஸ் அல்லது ஸ்டேட் பெறப்படும்போது ரெண்டரிங் செய்வதற்கு முன்பு அழைக்கப்படுகிறது. இது தேவையற்ற மறு-ரெண்டர்களைத் தடுப்பதன் மூலம் செயல்திறனை மேம்படுத்த உங்களை அனுமதிக்கிறது. காம்போனென்ட் புதுப்பிக்கப்பட வேண்டுமானால் true அல்லது புதுப்பிக்கப்படாவிட்டால் false ரிட்டர்ன் செய்ய வேண்டும்.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM புதுப்பிக்கப்படுவதற்கு சற்று முன்பு அழைக்கப்படுகிறது. DOM மாறுவதற்கு முன்பு அதிலிருந்து தகவல்களை (உதாரணமாக, ஸ்க்ரோல் நிலை)ப் பிடிக்கப் பயன்படுகிறது. இதன் ரிட்டர்ன் மதிப்பு componentDidUpdate()-க்கு ஒரு பாராமீட்டராக அனுப்பப்படும்.
• componentDidUpdate(prevProps, prevState, snapshot): ஒரு புதுப்பிப்பு ஏற்பட்ட உடனேயே அழைக்கப்படுகிறது. ஒரு காம்போனென்ட் புதுப்பிக்கப்பட்ட பிறகு DOM செயல்பாடுகளைச் செய்ய இது ஒரு நல்ல இடம்.
• componentWillUnmount(): ஒரு காம்போனென்ட் அன்மவுண்ட் செய்யப்பட்டு அழிக்கப்படுவதற்கு சற்று முன்பு அழைக்கப்படுகிறது. நிகழ்வு கேட்பவர்களை (event listeners) அகற்றுவது அல்லது நெட்வொர்க் கோரிக்கைகளை ரத்து செய்வது போன்ற ஆதாரங்களைச் சுத்தம் செய்ய இது ஒரு நல்ல இடம்.
• static getDerivedStateFromError(error): ரெண்டரிங் போது ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது பிழையை ஒரு ஆர்குமென்ட்டாகப் பெறுகிறது மற்றும் ஸ்டேட்டைப் புதுப்பிக்க ஒரு மதிப்பை ரிட்டர்ன் செய்ய வேண்டும். இது காம்போனென்ட் ஒரு பின்னடைவு UI-ஐ (fallback UI) காட்ட அனுமதிக்கிறது.
• componentDidCatch(error, info): ஒரு துணை காம்போனென்ட்டில் (descendant component) ரெண்டரிங் போது ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது பிழை மற்றும் காம்போனென்ட் ஸ்டாக் தகவலை ஆர்குமென்ட்களாகப் பெறுகிறது. பிழைகளை ஒரு பிழை அறிக்கையிடல் சேவைக்கு பதிவு செய்ய இது ஒரு நல்ல இடம்.

செயல்பாட்டில் வாழ்க்கைச் சுழற்சி மெத்தட்களின் எடுத்துக்காட்டு

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

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

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

• componentDidMount() காம்போனென்ட் முதலில் மவுண்ட் செய்யப்படும்போது டேட்டாவைப் பெறுகிறது.
• componentDidUpdate() url ப்ராப் மாறினால் மீண்டும் டேட்டாவைப் பெறுகிறது.
• render() மெத்தட் டேட்டா பெறப்படும்போது ஒரு லோடிங் செய்தியைக் காட்டுகிறது, பின்னர் அது கிடைத்தவுடன் டேட்டாவை ரெண்டர் செய்கிறது.

வாழ்க்கைச் சுழற்சி மெத்தட்கள் மற்றும் பிழை கையாளுதல்

ரெண்டரிங் போது ஏற்படும் பிழைகளைக் கையாள ரியாக்ட் வாழ்க்கைச் சுழற்சி மெத்தட்களையும் வழங்குகிறது:

• static getDerivedStateFromError(error): ரெண்டரிங் போது ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது பிழையை ஒரு ஆர்குமென்ட்டாகப் பெறுகிறது மற்றும் ஸ்டேட்டைப் புதுப்பிக்க ஒரு மதிப்பை ரிட்டர்ன் செய்ய வேண்டும். இது காம்போனென்ட் ஒரு பின்னடைவு UI-ஐ (fallback UI) காட்ட அனுமதிக்கிறது.
• componentDidCatch(error, info): ஒரு துணை காம்போனென்ட்டில் ரெண்டரிங் போது ஒரு பிழை ஏற்பட்ட பிறகு அழைக்கப்படுகிறது. இது பிழை மற்றும் காம்போனென்ட் ஸ்டாக் தகவலை ஆர்குமென்ட்களாகப் பெறுகிறது. இது பிழைகளை ஒரு பிழை அறிக்கையிடல் சேவைக்கு பதிவு செய்ய ஒரு நல்ல இடம்.

இந்த மெத்தட்கள் பிழைகளை நேர்த்தியாகக் கையாளவும், உங்கள் பயன்பாடு செயலிழப்பதைத் தடுக்கவும் உங்களை அனுமதிக்கின்றன. உதாரணமாக, பயனருக்கு ஒரு பிழை செய்தியைக் காட்ட getDerivedStateFromError()-ஐயும், ஒரு சேவையகத்திற்கு பிழையைப் பதிவு செய்ய componentDidCatch()-ஐயும் பயன்படுத்தலாம்.

ஹூக்ஸ் மற்றும் ஃபங்ஷனல் காம்போனென்ட்கள்

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

• useState(): ஃபங்ஷனல் காம்போனென்ட்களில் ஸ்டேட்டைச் சேர்க்க உங்களை அனுமதிக்கிறது.
• useEffect(): componentDidMount(), componentDidUpdate(), மற்றும் componentWillUnmount() போன்றே, ஃபங்ஷனல் காம்போனென்ட்களில் பக்க விளைவுகளைச் செய்ய உங்களை அனுமதிக்கிறது.
• useContext(): ரியாக்ட் கான்டெக்ஸ்டை அணுக உங்களை அனுமதிக்கிறது.
• useReducer(): ஒரு ரிட்யூசர் ஃபங்ஷனைப் பயன்படுத்தி சிக்கலான ஸ்டேட்டை நிர்வகிக்க உங்களை அனுமதிக்கிறது.
• useCallback(): ஒரு ஃபங்ஷனின் நினைவில் வைக்கப்பட்ட (memoized) பதிப்பை ரிட்டர்ன் செய்கிறது, இது சார்புகளில் (dependencies) ஒன்று மாறியிருந்தால் மட்டுமே மாறும்.
• useMemo(): ஒரு நினைவில் வைக்கப்பட்ட மதிப்பை ரிட்டர்ன் செய்கிறது, இது சார்புகளில் ஒன்று மாறியிருந்தால் மட்டுமே மீண்டும் கணக்கிடப்படும்.
• useRef(): ரெண்டர்களுக்கு இடையில் மதிப்புகளை நிலைநிறுத்த உங்களை அனுமதிக்கிறது.
• useImperativeHandle(): ref-ஐப் பயன்படுத்தும்போது பெற்றோர் காம்போனென்ட்களுக்கு வெளிப்படுத்தப்படும் இன்ஸ்டன்ஸ் மதிப்பைத் தனிப்பயனாக்குகிறது.
• useLayoutEffect(): அனைத்து DOM மாற்றங்களுக்கும் பிறகு ஒத்திசைவாக (synchronously) செயல்படும் useEffect-இன் ஒரு பதிப்பு.
• useDebugValue(): ரியாக்ட் டெவ்டூல்ஸில் தனிப்பயன் ஹூக்களுக்கான ஒரு மதிப்பைக் காட்டப் பயன்படுகிறது.

useEffect ஹூக் எடுத்துக்காட்டு

ஒரு ஃபங்ஷனல் காம்போனென்டில் டேட்டாவைப் பெற useEffect() ஹூக்கை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

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

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // URL மாறினால் மட்டுமே விளைவை மீண்டும் இயக்கவும்

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

  return <div>{data.message}</div>;
}

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

• useEffect() காம்போனென்ட் முதலில் ரெண்டர் செய்யப்படும்போதும், url ப்ராப் மாறும்போதும் டேட்டாவைப் பெறுகிறது.
• useEffect()-இன் இரண்டாவது ஆர்குமென்ட் சார்புகளின் ஒரு வரிசை ஆகும். சார்புகளில் ஏதேனும் மாறினால், விளைவு மீண்டும் இயக்கப்படும்.
• useState() ஹூக் காம்போனென்ட்டின் ஸ்டேட்டை நிர்வகிக்கப் பயன்படுகிறது.

ரியாக்ட் ரெண்டரிங் செயல்திறனை மேம்படுத்துதல்

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

1. தேவையற்ற மறு-ரெண்டர்களைத் தடுத்தல்

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

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

2. கோட்-ஸ்ப்ளிட்டிங் (Code-Splitting)

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

கோட்-ஸ்ப்ளிட்டிங்கைச் செயல்படுத்த ரியாக்ட் பல வழிகளை வழங்குகிறது:

• React.lazy() மற்றும் Suspense-ஐப் பயன்படுத்துதல்: இந்த அம்சங்கள் காம்போனென்ட்களை மாறும் வகையில் இறக்குமதி செய்ய உங்களை அனுமதிக்கின்றன, அவை தேவைப்படும்போது மட்டுமே ஏற்றப்படுகின்றன.
• டைனமிக் இறக்குமதிகளைப் பயன்படுத்துதல்: தேவைக்கேற்ப மாட்யூல்களை ஏற்ற நீங்கள் டைனமிக் இறக்குமதிகளைப் பயன்படுத்தலாம்.

3. பட்டியல் மெய்நிகராக்கம் (List Virtualization)

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

பட்டியல் மெய்நிகராக்க காம்போனென்ட்களை வழங்கும் பல லைப்ரரிகள் உள்ளன, அவை:

• react-window
• react-virtualized

4. படங்களை மேம்படுத்துதல்

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

• மேம்படுத்தப்பட்ட பட வடிவங்களைப் பயன்படுத்தவும்: சிறந்த சுருக்கம் மற்றும் தரத்திற்கு WebP போன்ற வடிவங்களைப் பயன்படுத்தவும்.
• படங்களின் அளவை மாற்றவும்: படங்களை அவற்றின் காட்சி அளவிற்குப் பொருத்தமான பரிமாணங்களுக்கு அளவை மாற்றவும்.
• படங்களை சோம்பேறித்தனமாக ஏற்றவும் (Lazy load images): படங்கள் திரையில் தெரியும் போது மட்டுமே அவற்றை ஏற்றவும்.
• ஒரு CDN-ஐப் பயன்படுத்தவும்: உங்கள் பயனர்களுக்கு புவியியல் ரீதியாக நெருக்கமான சேவையகங்களிலிருந்து படங்களை வழங்க ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும்.

5. சுயவிவரம் மற்றும் பிழைத்திருத்தம் (Profiling and Debugging)

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

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

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சிறந்த நடைமுறைகள்

எடுத்துக்காட்டு: ஒரு ஃபங்ஷனல் காம்போனென்ட்டை நினைவில் வைத்தல் (Memoizing)

ஒரு பயனரின் பெயரைக் காட்டும் ஒரு எளிய ஃபங்ஷனல் காம்போனென்ட்டைக் கவனியுங்கள்:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

இந்த காம்போனென்ட் தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்வதைத் தடுக்க, நீங்கள் React.memo()-ஐப் பயன்படுத்தலாம்:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

இப்போது, UserProfile user ப்ராப் மாறினால் மட்டுமே மீண்டும் ரெண்டர் செய்யும்.

எடுத்துக்காட்டு: useCallback()-ஐப் பயன்படுத்துதல்

ஒரு குழந்தை காம்போனென்ட்டிற்கு ஒரு கால்பேக் ஃபங்ஷனை அனுப்பும் ஒரு காம்போனென்ட்டைக் கவனியுங்கள்:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

இந்த எடுத்துக்காட்டில், ParentComponent-இன் ஒவ்வொரு ரெண்டரிலும் handleClick ஃபங்ஷன் மீண்டும் உருவாக்கப்படுகிறது. இது ChildComponent அதன் ப்ராப்ஸ் மாறாவிட்டாலும் தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்ய வைக்கிறது.

இதைத் தடுக்க, handleClick ஃபங்ஷனை நினைவில் வைக்க நீங்கள் useCallback()-ஐப் பயன்படுத்தலாம்:

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count மாறினால் மட்டுமே ஃபங்ஷனை மீண்டும் உருவாக்கவும்

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

இப்போது, count ஸ்டேட் மாறினால் மட்டுமே handleClick ஃபங்ஷன் மீண்டும் உருவாக்கப்படும்.

எடுத்துக்காட்டு: useMemo()-ஐப் பயன்படுத்துதல்

அதன் ப்ராப்ஸ்களின் அடிப்படையில் ஒரு பெறப்பட்ட மதிப்பைக் கணக்கிடும் ஒரு காம்போனென்ட்டைக் கவனியுங்கள்:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

இந்த எடுத்துக்காட்டில், MyComponent-இன் ஒவ்வொரு ரெண்டரிலும் filteredItems வரிசை மீண்டும் கணக்கிடப்படுகிறது, items ப்ராப் மாறாவிட்டாலும். items வரிசை பெரியதாக இருந்தால் இது திறமையற்றதாக இருக்கலாம்.

இதைத் தடுக்க, filteredItems வரிசையை நினைவில் வைக்க நீங்கள் useMemo()-ஐப் பயன்படுத்தலாம்:

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

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // items அல்லது filter மாறினால் மட்டுமே மீண்டும் கணக்கிடவும்

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

இப்போது, items ப்ராப் அல்லது filter ஸ்டேட் மாறினால் மட்டுமே filteredItems வரிசை மீண்டும் கணக்கிடப்படும்.

முடிவுரை

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

மேலும் ஆதாரங்கள்

• ரியாக்ட் ஆவணம் - ரெண்டரிங் எலிமெண்ட்டுகள்
• ரியாக்ட் ஆவணம் - ஸ்டேட் மற்றும் வாழ்க்கைச் சுழற்சி
• ரியாக்ட் ஆவணம் - ஹூக்ஸ்
• ரியாக்ட் ஆவணம் - செயல்திறனை மேம்படுத்துதல்