ரியாக்ட் கான்டெக்ஸ்ட் ஆப்டிமைசேஷன்: உலகளாவிய செயல்திறனுக்காக தேர்ந்தெடுத்து மீண்டும் ரெண்டர் செய்வதில் தேர்ச்சி பெறுதல்

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

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

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

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

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

`useContext` ஹூக்கின் பங்கு

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

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

ரியாக்ட் கான்டெக்ஸ்ட் உடன் தேர்ந்தெடுத்து மீண்டும் ரெண்டர் செய்வதற்கான உத்திகள்

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

1. கான்டெக்ஸ்ட்களைப் பிரித்தல்

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

உதாரணம்:

// முன்பு: ஒற்றை பெரிய கான்டெக்ஸ்ட்
const AppContext = React.createContext();

// பிறகு: பல கான்டெக்ஸ்ட்களாகப் பிரிக்கப்பட்டது
const AuthContext = React.createContext();
const ThemeContext = React.createContext();
const CartContext = React.createContext();

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

2. `React.memo` உடன் மெமோயைசேஷன்

`React.memo` என்பது உங்கள் ஃபங்ஷனல் காம்போனென்ட்டை மெமோயைஸ் செய்யும் ஒரு உயர்-நிலை காம்போனென்ட் (HOC) ஆகும். இது காம்போனென்ட்டின் ப்ராப்ஸ் மற்றும் நிலையின் ஆழமற்ற ஒப்பீட்டைச் செய்கிறது. ப்ராப்ஸ் மற்றும் நிலை மாறவில்லை என்றால், ரியாக்ட் காம்போனென்ட்டை ரெண்டர் செய்வதைத் தவிர்த்து, கடைசியாக ரெண்டர் செய்யப்பட்ட முடிவை மீண்டும் பயன்படுத்துகிறது. இது கான்டெக்ஸ்டுடன் இணைக்கப்படும்போது சக்தி வாய்ந்தது.

ஒரு காம்போனென்ட் ஒரு கான்டெக்ஸ்ட் மதிப்பை நுகரும்போது, அந்த மதிப்பு அந்த காம்போனென்ட்டிற்கு ஒரு ப்ராப் ஆகிறது (கருத்துரீதியாக, ஒரு மெமோயைஸ் செய்யப்பட்ட காம்போனென்ட்டிற்குள் `useContext` ஐப் பயன்படுத்தும்போது). கான்டெக்ஸ்ட் மதிப்பு மாறவில்லை என்றால் (அல்லது காம்போனென்ட் பயன்படுத்தும் கான்டெக்ஸ்ட் மதிப்பின் பகுதி மாறவில்லை என்றால்), `React.memo` ஒரு மறு-ரெண்டரைத் தடுக்கலாம்.

உதாரணம்:

// கான்டெக்ஸ்ட் புரொவைடர்
const MyContext = React.createContext();

function MyContextProvider({ children }) {
  const [value, setValue] = React.useState('initial value');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

// கான்டெக்ஸ்டைப் பயன்படுத்தும் காம்போனென்ட்
const DisplayComponent = React.memo(() => {
  const { value } = React.useContext(MyContext);
  console.log('DisplayComponent rendered');
  return <div>The value is: {value}</div>;
});

// மற்றொரு காம்போனென்ட்
const UpdateButton = () => {
  const { setValue } = React.useContext(MyContext);
  return <button onClick={() => setValue('new value')}>Update Value</button>;
};

// ஆப் கட்டமைப்பு
function App() {
  return (
    <MyContextProvider>
      <DisplayComponent />
      <UpdateButton />
    </MyContextProvider>
  );
}

இந்த எடுத்துக்காட்டில், `setValue` மட்டும் புதுப்பிக்கப்பட்டால் (எ.கா., பொத்தானைக் கிளிக் செய்வதன் மூலம்), `DisplayComponent` கான்டெக்ஸ்டைப் பயன்படுத்தினாலும், அது `React.memo`-வில் சுற்றப்பட்டு, `value` மாறாமல் இருந்தால், மீண்டும் ரெண்டர் ஆகாது. இது `React.memo` ப்ராப்ஸ்களின் ஆழமற்ற ஒப்பீட்டைச் செய்வதால் வேலை செய்கிறது. ஒரு மெமோயைஸ் செய்யப்பட்ட காம்போனென்ட்டிற்குள் `useContext` அழைக்கப்படும்போது, அதன் திரும்பும் மதிப்பு மெமோயைசேஷன் நோக்கங்களுக்காக ஒரு ப்ராப் ஆக திறம்படக் கருதப்படுகிறது. ரெண்டர்களுக்கு இடையில் கான்டெக்ஸ்ட் மதிப்பு மாறவில்லை என்றால், காம்போனென்ட் மீண்டும் ரெண்டர் ஆகாது.

எச்சரிக்கை: `React.memo` ஒரு ஆழமற்ற ஒப்பீட்டைச் செய்கிறது. உங்கள் கான்டெக்ஸ்ட் மதிப்பு ஒரு ஆப்ஜெக்ட் அல்லது அரேவாக இருந்து, புரொவைடரின் ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய ஆப்ஜெக்ட்/அரே உருவாக்கப்பட்டால் (உள்ளடக்கங்கள் ஒரே மாதிரியாக இருந்தாலும்), `React.memo` மறு-ரெண்டர்களைத் தடுக்காது. இது நம்மை அடுத்த மேம்படுத்தல் உத்திக்கு இட்டுச் செல்கிறது.

3. கான்டெக்ஸ்ட் மதிப்புகளை மெமோயைஸ் செய்தல்

`React.memo` திறம்பட இருப்பதை உறுதிசெய்ய, புரொவைடரின் ஒவ்வொரு ரெண்டரிலும் உங்கள் கான்டெக்ஸ்ட் மதிப்பிற்கான புதிய ஆப்ஜெக்ட் அல்லது அரே ரெஃபரன்ஸ்கள் உருவாக்கப்படுவதைத் தடுக்க வேண்டும், அவற்றிலுள்ள தரவு உண்மையில் மாறாத வரை. இங்குதான் `useMemo` ஹூக் வருகிறது.

உதாரணம்:

// மெமோயைஸ் செய்யப்பட்ட மதிப்புடன் கான்டெக்ஸ்ட் புரொவைடர்
function MyContextProvider({ children }) {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  // கான்டெக்ஸ்ட் மதிப்பு ஆப்ஜெக்டை மெமோயைஸ் செய்யவும்
  const contextValue = React.useMemo(() => ({
    user,
    theme
  }), [user, theme]);

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

// பயனர் தரவு மட்டுமே தேவைப்படும் காம்போனென்ட்
const UserProfile = React.memo(() => {
  const { user } = React.useContext(MyContext);
  console.log('UserProfile rendered');
  return <div>User: {user.name}</div>;
});

// தீம் தரவு மட்டுமே தேவைப்படும் காம்போனென்ட்
const ThemeDisplay = React.memo(() => {
  const { theme } = React.useContext(MyContext);
  console.log('ThemeDisplay rendered');
  return <div>Theme: {theme}</div>;
});

// பயனரைப் புதுப்பிக்கக்கூடிய காம்போனென்ட்
const UpdateUserButton = () => {
  const { setUser } = React.useContext(MyContext);
  return <button onClick={() => setUser({ name: 'Bob' })}>Update User</button>;
};

// ஆப் கட்டமைப்பு
function App() {
  return (
    <MyContextProvider>
      <UserProfile />
      <ThemeDisplay />
      <UpdateUserButton />
    </MyContextProvider>
  );
}

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

• `contextValue` ஆப்ஜெக்ட் `useMemo` ஐப் பயன்படுத்தி உருவாக்கப்படுகிறது. `user` அல்லது `theme` நிலை மாறினால் மட்டுமே அது மீண்டும் உருவாக்கப்படும்.
• `UserProfile` முழு `contextValue`-ஐயும் பயன்படுத்துகிறது, ஆனால் `user`-ஐ மட்டுமே பிரித்தெடுக்கிறது. `theme` மாறி, ஆனால் `user` மாறவில்லை என்றால், `contextValue` ஆப்ஜெக்ட் மீண்டும் உருவாக்கப்படும் (சார்பு வரிசை காரணமாக), மற்றும் `UserProfile` மீண்டும் ரெண்டர் ஆகும்.
• `ThemeDisplay` இதேபோல் கான்டெக்ஸ்டைப் பயன்படுத்தி `theme`-ஐப் பிரித்தெடுக்கிறது. `user` மாறி, ஆனால் `theme` மாறவில்லை என்றால், `UserProfile` மீண்டும் ரெண்டர் ஆகும்.

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

4. தேர்ந்தெடுத்த கான்டெக்ஸ்ட் பயன்பாட்டிற்காக தனிப்பயன் ஹூக்குகளைப் பயன்படுத்துதல்

தேர்ந்தெடுத்து மீண்டும் ரெண்டர் செய்வதை அடைவதற்கான மிகவும் சக்திவாய்ந்த முறை, `useContext` அழைப்பை சுருக்கி, கான்டெக்ஸ்ட் மதிப்பின் பகுதிகளைத் தேர்ந்தெடுத்துத் தரும் தனிப்பயன் ஹூக்குகளை உருவாக்குவதாகும். இந்த தனிப்பயன் ஹூக்குகளை `React.memo`-வுடன் இணைக்கலாம்.

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

உதாரணம்:

// --- கான்டெக்ஸ்ட் அமைப்பு --- 
const AppStateContext = React.createContext();

function AppStateProvider({ children }) {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');
  const [notifications, setNotifications] = React.useState([]);

  // எதுவும் மாறவில்லை என்றால் நிலையான ரெஃபரன்ஸை உறுதிசெய்ய முழு கான்டெக்ஸ்ட் மதிப்பையும் மெமோயைஸ் செய்யவும்
  const contextValue = React.useMemo(() => ({
    user,
    theme,
    notifications,
    setUser,
    setTheme,
    setNotifications
  }), [user, theme, notifications]);

  return (
    <AppStateContext.Provider value={contextValue}>
      {children}
    </AppStateContext.Provider>
  );
}

// --- தேர்ந்தெடுத்த பயன்பாட்டிற்கான தனிப்பயன் ஹூக்குகள் --- 

// பயனர் தொடர்பான நிலை மற்றும் செயல்களுக்கான ஹூக்
function useUser() {
  const { user, setUser } = React.useContext(AppStateContext);
  // இங்கு, நாம் ஒரு ஆப்ஜெக்டைத் திருப்புகிறோம். பயன்படுத்தும் காம்போனென்ட்டிற்கு React.memo பயன்படுத்தப்பட்டால்,
  // மற்றும் 'user' ஆப்ஜெக்ட் (அதன் உள்ளடக்கம்) மாறவில்லை என்றால், காம்போனென்ட் மீண்டும் ரெண்டர் ஆகாது.
  // நாம் இன்னும் நுணுக்கமாக இருக்க வேண்டும் மற்றும் setUser மட்டும் மாறும்போது மறு-ரெண்டர்களைத் தவிர்க்க வேண்டும் என்றால்,
  // நாம் இன்னும் கவனமாக இருக்க வேண்டும் அல்லது கான்டெக்ஸ்டை மேலும் பிரிக்க வேண்டும்.
  return { user, setUser };
}

// தீம் தொடர்பான நிலை மற்றும் செயல்களுக்கான ஹூக்
function useTheme() {
  const { theme, setTheme } = React.useContext(AppStateContext);
  return { theme, setTheme };
}

// அறிவிப்புகள் தொடர்பான நிலை மற்றும் செயல்களுக்கான ஹூக்
function useNotifications() {
  const { notifications, setNotifications } = React.useContext(AppStateContext);
  return { notifications, setNotifications };
}

// --- தனிப்பயன் ஹூக்குகளைப் பயன்படுத்தும் மெமோயைஸ் செய்யப்பட்ட காம்போனென்ட்கள் --- 

const UserProfile = React.memo(() => {
  const { user } = useUser(); // தனிப்பயன் ஹூக்கைப் பயன்படுத்துகிறது
  console.log('UserProfile rendered');
  return <div>User: {user.name}</div>;
});

const ThemeDisplay = React.memo(() => {
  const { theme } = useTheme(); // தனிப்பயன் ஹூக்கைப் பயன்படுத்துகிறது
  console.log('ThemeDisplay rendered');
  return <div>Theme: {theme}</div>;
});

const NotificationCount = React.memo(() => {
  const { notifications } = useNotifications(); // தனிப்பயன் ஹூக்கைப் பயன்படுத்துகிறது
  console.log('NotificationCount rendered');
  return <div>Notifications: {notifications.length}</div>;
});

// தீமைப் புதுப்பிக்கும் காம்போனென்ட்
const ThemeSwitcher = React.memo(() => {
  const { setTheme } = useTheme();
  console.log('ThemeSwitcher rendered');
  return (
    <button onClick={() => setTheme(prev => prev === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
});

// ஆப் கட்டமைப்பு
function App() {
  return (
    <AppStateProvider>
      <UserProfile />
      <ThemeDisplay />
      <NotificationCount />
      <ThemeSwitcher />
      {/* அறிவிப்புகளைப் புதுப்பித்து அதன் தனிமைப்படுத்தலைச் சோதிக்க பொத்தானைச் சேர்க்கவும் */}
      <button onClick={() => {
          const { setNotifications } = {
            // ஒரு உண்மையான பயன்பாட்டில், இது கான்டெக்ஸ்டிலிருந்து வரும், ஒருவேளை மற்றொரு ஹூக் வழியாக
            setNotifications: (val) => console.log('Setting notifications:', val) 
          };
          setNotifications(prev => [...prev, 'New notification'])
      }}>Add Notification</button>
    </AppStateProvider>
  );
}

இந்த அமைப்பில்:

• `UserProfile` `useUser`-ஐப் பயன்படுத்துகிறது. `user` ஆப்ஜெக்ட்டின் ரெஃபரன்ஸ் மாறினால் மட்டுமே அது மீண்டும் ரெண்டர் ஆகும் (புரொவைடரில் உள்ள `useMemo` இதற்கு உதவுகிறது).
• `ThemeDisplay` `useTheme`-ஐப் பயன்படுத்துகிறது மற்றும் `theme` மதிப்பு மாறினால் மட்டுமே மீண்டும் ரெண்டர் ஆகும்.
• `NotificationCount` `useNotifications`-ஐப் பயன்படுத்துகிறது மற்றும் `notifications` அரே மாறினால் மட்டுமே மீண்டும் ரெண்டர் ஆகும்.
• `ThemeSwitcher` `setTheme`-ஐ அழைக்கும் போது, `ThemeDisplay` மற்றும் `ThemeSwitcher` மட்டுமே (அதன் சொந்த நிலை மாற்றங்கள் அல்லது ப்ராப் மாற்றங்கள் காரணமாக மீண்டும் ரெண்டர் ஆனால்) மீண்டும் ரெண்டர் ஆகும். தீமைச் சார்ந்திராத `UserProfile` மற்றும் `NotificationCount` ரெண்டர் ஆகாது.
• இதேபோல், அறிவிப்புகள் புதுப்பிக்கப்பட்டால், `NotificationCount` மட்டுமே மீண்டும் ரெண்டர் ஆகும் (`setNotifications` சரியாக அழைக்கப்பட்டு, `notifications` அரே ரெஃபரன்ஸ் மாறுவதாகக் கருதினால்).

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

5. `useContextSelector` ஐப் பயன்படுத்துதல் (மூன்றாம் தரப்பு லைப்ரரிகள்)

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

use-context-selector உடன் உதாரணம்:

// இன்ஸ்டால்: npm install use-context-selector
import { createContext } from 'react';
import { useContextSelector } from 'use-context-selector';

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = React.useState({ name: 'Alice', age: 30 });

  // எதுவும் மாறவில்லை என்றால் நிலைத்தன்மையை உறுதிசெய்ய கான்டெக்ஸ்ட் மதிப்பை மெமோயைஸ் செய்யவும்
  const contextValue = React.useMemo(() => ({
    user,
    setUser
  }), [user]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
}

// பயனரின் பெயர் மட்டுமே தேவைப்படும் காம்போனென்ட்
const UserNameDisplay = () => {
  const userName = useContextSelector(UserContext, context => context.user.name);
  console.log('UserNameDisplay rendered');
  return <div>User Name: {userName}</div>;
};

// பயனரின் வயது மட்டுமே தேவைப்படும் காம்போனென்ட்
const UserAgeDisplay = () => {
  const userAge = useContextSelector(UserContext, context => context.user.age);
  console.log('UserAgeDisplay rendered');
  return <div>User Age: {userAge}</div>;
};

// பயனரைப் புதுப்பிக்கும் காம்போனென்ட்
const UpdateUserButton = () => {
  const setUser = useContextSelector(UserContext, context => context.setUser);
  return (
    <button onClick={() => setUser({ name: 'Bob', age: 25 })}>Update User</button>
  );
};

// ஆப் கட்டமைப்பு
function App() {
  return (
    <UserProvider>
      <UserNameDisplay />
      <UserAgeDisplay />
      <UpdateUserButton />
    </UserProvider>
  );
}

`use-context-selector` உடன்:

• `UserNameDisplay` `user.name` பண்பிற்கு மட்டுமே குழுசேர்கிறது.
• `UserAgeDisplay` `user.age` பண்பிற்கு மட்டுமே குழுசேர்கிறது.
• `UpdateUserButton` கிளிக் செய்யப்பட்டு, `setUser` ஒரு புதிய பயனர் ஆப்ஜெக்டுடன் (வெவ்வேறு பெயர் மற்றும் வயதுடன்) அழைக்கப்படும்போது, தேர்ந்தெடுக்கப்பட்ட மதிப்புகள் மாறியதால் `UserNameDisplay` மற்றும் `UserAgeDisplay` இரண்டும் மீண்டும் ரெண்டர் ஆகும்.
• இருப்பினும், உங்களிடம் தீமிற்காக ஒரு தனி புரொவைடர் இருந்து, தீம் மட்டும் மாறினால், `UserNameDisplay` அல்லது `UserAgeDisplay` எதுவும் மீண்டும் ரெண்டர் ஆகாது, இது உண்மையான தேர்ந்தெடுத்த குழுசேர்தலைக் காட்டுகிறது.

இந்த லைப்ரரி, செலக்டர் அடிப்படையிலான நிலை நிர்வாகத்தின் (ரெடக்ஸ் அல்லது ஸுஸ்டாண்ட் போன்ற) நன்மைகளை கான்டெக்ஸ்ட் API-க்கு திறம்பட கொண்டு வருகிறது, இது மிகவும் நுணுக்கமான புதுப்பிப்புகளை அனுமதிக்கிறது.

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

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

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

கான்டெக்ஸ்டை எப்போது மேம்படுத்துவது

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

• கான்டெக்ஸ்டைப் பயன்படுத்தும் காம்போனென்ட்களால் ஏற்படும் செயல்திறன் சிக்கல்களை (தடுமாறும் UI, மெதுவான தொடர்புகள்) நீங்கள் கவனிக்கும்போது.
• உங்கள் கான்டெக்ஸ்ட் ஒரு பெரிய அல்லது அடிக்கடி மாறும் தரவு ஆப்ஜெக்டை வழங்குகிறது, மேலும் பல காம்போனென்ட்கள் சிறிய, நிலையான பகுதிகள் மட்டுமே தேவைப்பட்டாலும் அதைப் பயன்படுத்துகின்றன.
• நீங்கள் பல டெவலப்பர்களுடன் ஒரு பெரிய அளவிலான பயன்பாட்டை உருவாக்குகிறீர்கள், அங்கு பல்வேறு பயனர் சூழல்களில் நிலையான செயல்திறன் முக்கியமானது.

முடிவுரை

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