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

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

experimental_useSubscription என்றால் என்ன?

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

இந்த ஹூக் இரண்டு முதன்மை ஆர்கியூமென்ட்களை எடுத்துக்கொள்கிறது:

• dataSource: subscribe முறை (அவதானிக்கக்கூடிய நூலகங்களில் நீங்கள் காண்பதைப் போன்றது) மற்றும் getSnapshot முறையுடன் கூடிய ஒரு ஆப்ஜெக்ட். subscribe முறையானது, தரவு மூலம் மாறும்போது அழைக்கப்படும் ஒரு கால்பேக்கை எடுத்துக்கொள்கிறது. getSnapshot முறையானது தரவின் தற்போதைய மதிப்பை வழங்குகிறது.
• getSnapshot (விருப்பத்தேர்வு): தரவு மூலத்திலிருந்து உங்கள் காம்போனென்டிற்குத் தேவையான குறிப்பிட்ட தரவைப் பிரித்தெடுக்கும் ஒரு ஃபங்ஷன். ஒட்டுமொத்த தரவு மூலம் மாறும்போது, ஆனால் காம்போனென்டிற்குத் தேவையான குறிப்பிட்ட தரவு மாறாமல் இருக்கும்போது தேவையற்ற மறு-ரெண்டர்களைத் தடுப்பதற்கு இது மிக முக்கியம்.

ஒரு கற்பனையான தரவு மூலத்துடன் அதன் பயன்பாட்டை விளக்கும் ஒரு எளிய எடுத்துக்காட்டு இங்கே:

import { experimental_useSubscription as useSubscription } from 'react';

const myDataSource = {
  subscribe(callback) {
    // தரவு மாற்றங்களுக்கு சந்தா செலுத்துவதற்கான லாஜிக் (எ.கா., WebSockets, RxJS, போன்றவற்றைப் பயன்படுத்தி)
    // எடுத்துக்காட்டு: setInterval(() => callback(), 1000); // ஒவ்வொரு நொடியும் மாற்றங்களை உருவகப்படுத்துங்கள்
  },
  getSnapshot() {
    // மூலத்திலிருந்து தற்போதைய தரவைப் பெறுவதற்கான லாஜிக்
    return myData;
  }
};

function MyComponent() {
  const data = useSubscription(myDataSource);

  return (
    <div>
      <p>தரவு: {data}</p>
    </div>
  );
}

சந்தா செயலாக்க கூடுதல் சுமை: முக்கிய சிக்கல்

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

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

செயல்திறன் இடையூறுகளை அடையாளம் காணுதல்

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

1. ரியாக்ட் ப்ரொஃபைலர்

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

• காம்போனென்ட் தொடர்புகளைப் பதிவுசெய்க: experimental_useSubscription உடன் காம்போனென்ட்களை செயலில் பயன்படுத்தும்போது உங்கள் பயன்பாட்டை ப்ரொஃபைல் செய்யவும்.
• ரெண்டர் நேரங்களை பகுப்பாய்வு செய்யுங்கள்: அடிக்கடி ரெண்டர் செய்யும் அல்லது ரெண்டர் செய்ய அதிக நேரம் எடுக்கும் காம்போனென்ட்களை அடையாளம் காணவும்.
• மறு-ரெண்டர்களின் மூலத்தை அடையாளம் காணவும்: ப்ரொஃபைலர் பெரும்பாலும் தேவையற்ற மறு-ரெண்டர்களைத் தூண்டும் குறிப்பிட்ட தரவு மூல புதுப்பிப்புகளைத் துல்லியமாகக் கண்டறிய முடியும்.

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

2. செயல்திறன் கண்காணிப்புக் கருவிகள்

தயாரிப்புச் சூழல்களுக்கு, செயல்திறன் கண்காணிப்புக் கருவிகளைப் (எ.கா., Sentry, New Relic, Datadog) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இந்தக் கருவிகள் பின்வருவனவற்றைப் பற்றிய நுண்ணறிவுகளை வழங்க முடியும்:

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

3. குறியீடு மதிப்புரைகள் மற்றும் நிலையான பகுப்பாய்வு

குறியீடு மதிப்புரைகளின் போது, experimental_useSubscription எவ்வாறு பயன்படுத்தப்படுகிறது என்பதில் அதிக கவனம் செலுத்துங்கள்:

• சந்தா வரம்பை மதிப்பிடுங்கள்: காம்போனென்ட்கள் மிகவும் பரந்த தரவு மூலங்களுக்கு சந்தா செலுத்துகின்றனவா, இது தேவையற்ற மறு-ரெண்டர்களுக்கு வழிவகுக்கிறதா?
• getSnapshot செயலாக்கங்களை மதிப்பாய்வு செய்யவும்: getSnapshot ஃபங்ஷன் தேவையான தரவை திறமையாகப் பிரித்தெடுக்கிறதா?
• சாத்தியமான ரேஸ் கண்டிஷன்களைத் தேடுங்கள்: ஒத்திசைவற்ற தரவு மூல புதுப்பிப்புகள் சரியாகக் கையாளப்படுகின்றனவா என்பதை உறுதிப்படுத்தவும், குறிப்பாக உடனிகழ் ரெண்டரிங்கைக் கையாளும்போது.

நிலையான பகுப்பாய்வுக் கருவிகளும் (எ.கா., பொருத்தமான ப்ளகின்களுடன் ESLint) உங்கள் குறியீட்டில் சாத்தியமான செயல்திறன் சிக்கல்களை அடையாளம் காண உதவும், அதாவது useCallback அல்லது useMemo ஹூக்குகளில் விடுபட்ட சார்புநிலைகள் போன்றவை.

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

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

1. getSnapshot உடன் தேர்ந்தெடுத்த தரவு பெறுதல்

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

எடுத்துக்காட்டு:

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

const userDataSource = {
  subscribe(callback) { /* ... */ },
  getSnapshot() {
    return {
      name: "Alice Smith",
      email: "alice.smith@example.com",
      profilePicture: "/images/alice.jpg"
    };
  }
};

function NameComponent() {
  const name = useSubscription(userDataSource, () => userDataSource.getSnapshot().name);

  return <p>பயனர் பெயர்: {name}</p>;
}

இந்த எடுத்துக்காட்டில், userDataSource ஆப்ஜெக்டில் உள்ள மற்ற பண்புகள் புதுப்பிக்கப்பட்டாலும், பயனரின் பெயர் மாறினால் மட்டுமே NameComponent மீண்டும் ரெண்டர் ஆகும்.

2. useMemo மற்றும் useCallback உடன் மெமோயிசேஷன்

மெமோயிசேஷன் என்பது அதிக செலவு மிக்க கணக்கீடுகள் அல்லது ஃபங்ஷன்களின் முடிவுகளை கேச் செய்வதன் மூலம் ரியாக்ட் காம்போனென்ட்களை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். getSnapshot ஃபங்ஷனின் முடிவை மெமோயிஸ் செய்ய useMemo-ஐப் பயன்படுத்தவும், மற்றும் subscribe முறைக்கு அனுப்பப்பட்ட கால்பேக்கை மெமோயிஸ் செய்ய useCallback-ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

import { experimental_useSubscription as useSubscription } from 'react';
import { useCallback, useMemo } from 'react';

const myDataSource = {
  subscribe(callback) { /* ... */ },
  getSnapshot() {
    // அதிக செலவு மிக்க தரவு செயலாக்க லாஜிக்
    return processData(myData);
  }
};

function MyComponent({ prop1, prop2 }) {
  const getSnapshot = useCallback(() => {
    return myDataSource.getSnapshot();
  }, []);

  const data = useSubscription(myDataSource, getSnapshot);

  const memoizedValue = useMemo(() => {
    // தரவின் அடிப்படையில் அதிக செலவு மிக்க கணக்கீடு
    return calculateValue(data, prop1, prop2);
  }, [data, prop1, prop2]);

  return <div>{memoizedValue}</div>;
}

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

3. டிபவுன்சிங் மற்றும் த்ராட்லிங்

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

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

லோடாஷ் போன்ற நூலகங்களைப் பயன்படுத்தி அல்லது setTimeout-ஐப் பயன்படுத்தி தனிப்பயன் செயலாக்கங்கள் மூலம் டிபவுன்சிங் மற்றும் த்ராட்லிங்கை நீங்கள் செயல்படுத்தலாம்.

எடுத்துக்காட்டு (த்ராட்லிங்):

import { experimental_useSubscription as useSubscription } from 'react';
import { useRef, useCallback } from 'react';

function MyComponent() {
  const lastUpdate = useRef(0);

  const throttledGetSnapshot = useCallback(() => {
    const now = Date.now();
    if (now - lastUpdate.current > 100) { // அதிகபட்சம் ஒவ்வொரு 100ms-க்கும் புதுப்பிக்கவும்
      lastUpdate.current = now;
      return myDataSource.getSnapshot();
    }
    return null; // அல்லது ஒரு இயல்புநிலை மதிப்பு
  }, []);

  const data = useSubscription(myDataSource, throttledGetSnapshot);

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

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

4. React.memo-வைப் பயன்படுத்துதல்

React.memo என்பது ஒரு ஃபங்ஷனல் காம்போனென்டை மெமோயிஸ் செய்யும் ஒரு உயர்-வரிசை காம்போனென்ட் ஆகும். experimental_useSubscription-ஐப் பயன்படுத்தும் ஒரு காம்போனென்டை React.memo உடன் மூடுவதன் மூலம், காம்போனென்டின் ப்ராப்ஸ் மாறவில்லை என்றால் மறு-ரெண்டர்களைத் தடுக்கலாம்.

எடுத்துக்காட்டு:

import React, { experimental_useSubscription as useSubscription, memo } from 'react';

function MyComponent({ prop1, prop2 }) {
  const data = useSubscription(myDataSource);

  return <div>{data}, {prop1}, {prop2}</div>;
}

export default memo(MyComponent, (prevProps, nextProps) => {
  // தனிப்பயன் ஒப்பீட்டு லாஜிக் (விருப்பத்தேர்வு)
  return prevProps.prop1 === nextProps.prop1 && prevProps.prop2 === nextProps.prop2;
});

இந்த எடுத்துக்காட்டில், useSubscription-இலிருந்து வரும் தரவு புதுப்பிக்கப்பட்டாலும், prop1 அல்லது prop2 மாறினால் மட்டுமே MyComponent மீண்டும் ரெண்டர் ஆகும். காம்போனென்ட் எப்போது மீண்டும் ரெண்டர் ஆக வேண்டும் என்பதைக் கட்டுப்படுத்த, React.memo-க்கு ஒரு தனிப்பயன் ஒப்பீட்டு ஃபங்ஷனை நீங்கள் வழங்கலாம்.

5. மாற்றமுடியாமை மற்றும் கட்டமைப்புப் பகிர்வு

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

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

6. தொகுப்புப் புதுப்பிப்புகள் மற்றும் திட்டமிடல்

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

எடுத்துக்காட்டு:

const myDataSource = {
  subscribe(callback) {
    setInterval(() => {
      requestAnimationFrame(() => {
        callback(); // அடுத்த அனிமேஷன் ஃபிரேமிற்கான புதுப்பிப்பைத் திட்டமிடுங்கள்
      });
    }, 100);
  },
  getSnapshot() { /* ... */ }
};

7. பெரிய தரவுத்தொகுப்புகளுக்கான மெய்நிகராக்கம்

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

8. தரவு மூலப் புதுப்பிப்புகளைக் குறைத்தல்

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

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

9. ரெடக்ஸ் அல்லது பிற ஸ்டேட் மேலாண்மை நூலகங்களுடன் செலக்டர்களைப் பயன்படுத்துதல்

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

எடுத்துக்காட்டு (ரெடக்ஸுடன் ரீசெலக்ட்):

import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

// பயனர் பெயரைப் பிரித்தெடுப்பதற்கான செலக்டர்
const selectUserName = createSelector(
  state => state.user,
  user => user.name
);

function NameComponent() {
  // useSelector மற்றும் செலக்டரைப் பயன்படுத்தி பயனர் பெயருக்கு மட்டும் சந்தா செலுத்தவும்
  const userName = useSelector(selectUserName);

  return <p>பயனர் பெயர்: {userName}</p>;
}

ஒரு செலக்டரைப் பயன்படுத்துவதன் மூலம், user ஆப்ஜெக்டின் மற்ற பகுதிகள் புதுப்பிக்கப்பட்டாலும், ரெடக்ஸ் ஸ்டோரில் உள்ள user.name பண்பு மாறும்போது மட்டுமே NameComponent மீண்டும் ரெண்டர் ஆகும்.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

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

முடிவுரை

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