React experimental_useContextSelector: தேர்ந்தெடுத்து Context மதிப்புகளைப் பயன்படுத்துவதை பற்றிய ஒரு ஆழமான பார்வை

ரியாக்ட் Context API, உங்கள் கூறு மரத்தில் (component tree) ஒவ்வொரு நிலையிலும் props-ஐ கைமுறையாக அனுப்பாமல் தரவைப் பகிர ஒரு வழியை வழங்குகிறது. இது சக்திவாய்ந்ததாக இருந்தாலும், Context-ஐ நேரடியாகப் பயன்படுத்துவது சில நேரங்களில் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். Context-ஐ பயன்படுத்தும் ஒவ்வொரு கூறும், Context மதிப்பில் மாற்றம் ஏற்படும்போதெல்லாம் மீண்டும் ரெண்டர் (re-render) ஆகிறது, அந்த கூறு Context தரவின் ஒரு சிறிய பகுதியை மட்டுமே நம்பியிருந்தாலும் கூட. இங்குதான் experimental_useContextSelector உதவுகிறது. தற்போது ரியாக்ட்டின் பரிசோதனை சேனலில் உள்ள இந்த hook, கூறுகளுக்கு Context மதிப்பின் குறிப்பிட்ட பகுதிகளுக்கு மட்டும் குழுசேர (subscribe) அனுமதிக்கிறது, இதன் மூலம் தேவையற்ற re-renders-ஐக் குறைத்து செயல்திறனை கணிசமாக மேம்படுத்துகிறது.

experimental_useContextSelector என்றால் என்ன?

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

experimental_useContextSelector-ஐப் பயன்படுத்துவதன் முக்கிய நன்மைகள்:

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

இது எப்படி வேலை செய்கிறது?

experimental_useContextSelector hook இரண்டு வாதங்களை (arguments) எடுத்துக்கொள்கிறது:

1. React.createContext()-ஐப் பயன்படுத்தி உருவாக்கப்பட்ட Context பொருள் (object).
2. ஒரு selector function. இந்த செயல்பாடு முழு Context மதிப்பையும் ஒரு வாதமாகப் பெற்று, கூறுக்குத் தேவையான குறிப்பிட்ட மதிப்பைத் தரும்.

அந்த hook பின்னர் கூறை Context மதிப்பில் ஏற்படும் மாற்றங்களுக்கு குழுசேர வைக்கிறது, ஆனால் selector function மூலம் திருப்பியனுப்பப்படும் மதிப்பு மாறினால் மட்டுமே கூறை மீண்டும் ரெண்டர் செய்கிறது. தேர்ந்தெடுக்கப்பட்ட மதிப்பு மாறியுள்ளதா என்பதைத் தீர்மானிக்க, இது ஒரு திறமையான ஒப்பீட்டு வழிமுறையைப் (comparison algorithm) பயன்படுத்துகிறது (இயல்பாக Object.is, அல்லது வழங்கப்பட்டால் ஒரு தனிப்பயன் comparator).

எடுத்துக்காட்டு: ஒரு குளோபல் தீம் Context

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

1. தீம் Context-ஐ உருவாக்குதல்

முதலில், React.createContext()-ஐப் பயன்படுத்தி தீம் Context-ஐ உருவாக்குகிறோம்:

            import React from 'react';

interface Theme {
  primaryColor: string;
  secondaryColor: string;
  fontSize: string;
  fontFamily: string;
  toggleTheme: () => void; // Example action
}

const ThemeContext = React.createContext(undefined);

export default ThemeContext;

            

              
                Copy
              
            
          

2. தீம் Context-ஐ வழங்குதல்

அடுத்து, ஒரு ThemeProvider கூறைப் பயன்படுத்தி தீம் Context-ஐ வழங்குகிறோம்:

            import React, { useState, useCallback } from 'react';
import ThemeContext from './ThemeContext';

interface ThemeProviderProps {
  children: React.ReactNode;
}

const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = useState({
    primaryColor: '#007bff', // Default primary color
    secondaryColor: '#6c757d', // Default secondary color
    fontSize: '16px',
    fontFamily: 'Arial',
  });

  const toggleTheme = useCallback(() => {
      setTheme(prevTheme => ({
          ...prevTheme,
          primaryColor: prevTheme.primaryColor === '#007bff' ? '#28a745' : '#007bff' // Toggle between two primary colors
      }));
  }, []);

  const themeValue = {
    ...theme,
    toggleTheme: toggleTheme,
  };

  return (
    
      {children}
    
  );
};

export default ThemeProvider;

            

              
                Copy
              
            
          

3. experimental_useContextSelector உடன் தீம் Context-ஐப் பயன்படுத்துதல்

இப்போது, தீம் Context-இலிருந்து primaryColor-ஐ மட்டும் பயன்படுத்த வேண்டிய ஒரு கூறு உங்களிடம் இருப்பதாக வைத்துக்கொள்வோம். நிலையான useContext hook-ஐப் பயன்படுத்தினால், theme பொருளில் உள்ள எந்தவொரு பண்பு மாறினாலும் (எ.கா., fontSize, fontFamily) இந்தக் கூறு மீண்டும் ரெண்டர் ஆகும். experimental_useContextSelector மூலம், இந்த தேவையற்ற re-renders-ஐ நீங்கள் தவிர்க்கலாம்.

            import React from 'react';
import ThemeContext from './ThemeContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const MyComponent = () => {
  const primaryColor = useContextSelector(ThemeContext, (theme) => theme?.primaryColor);

  return (
    

      This text uses the primary color from the theme.
    
  );
};

export default MyComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ThemeContext-இல் உள்ள primaryColor மதிப்பு மாறும்போது மட்டுமே MyComponent மீண்டும் ரெண்டர் ஆகிறது. fontSize அல்லது fontFamily-இல் ஏற்படும் மாற்றங்கள் ஒரு re-render-ஐத் தூண்டாது.

4. experimental_useContextSelector உடன் தீம் Context Action-ஐப் பயன்படுத்துதல்

தீம்-ஐ மாற்றுவதற்கு ஒரு பொத்தானைச் சேர்ப்போம். இது context-இலிருந்து ஒரு செயல்பாட்டைத் தேர்ந்தெடுப்பதை விளக்குகிறது.

            import React from 'react';
import ThemeContext from './ThemeContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const ThemeToggler = () => {
  const toggleTheme = useContextSelector(ThemeContext, (theme) => theme?.toggleTheme);

  if (!toggleTheme) {
    return 
Error: No theme toggle function available.
;
  }

  return (
    
      Toggle Theme
    
  );
};

export default ThemeToggler;

            

              
                Copy
              
            
          

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

experimental_useContextSelector-ஐ எப்போது பயன்படுத்த வேண்டும்

experimental_useContextSelector பின்வரும் சூழ்நிலைகளில் குறிப்பாகப் பயனுள்ளதாக இருக்கும்:

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

experimental_useContextSelector-ஐப் பயன்படுத்தலாமா என்று முடிவு செய்யும்போது இந்தக் குறிப்புகளைக் கவனியுங்கள்:

• சிக்கல்தன்மை: experimental_useContextSelector-ஐப் பயன்படுத்துவது உங்கள் குறியீட்டில் சில சிக்கல்களைச் சேர்க்கிறது. செயல்திறன் ஆதாயங்கள் சேர்க்கப்பட்ட சிக்கலை விட அதிகமாக உள்ளதா என்பதைக் கவனியுங்கள்.
• மாற்று வழிகள்: experimental_useContextSelector-க்குச் செல்வதற்கு முன், memoization (React.memo, useMemo, useCallback) போன்ற பிற மேம்படுத்தல் நுட்பங்களை ஆராயுங்கள். சில நேரங்களில் எளிய memoization போதுமானதாக இருக்கும்.
• செயல்திறன் பகுப்பாய்வு (Profiling): உங்கள் பயன்பாட்டை பகுப்பாய்வு செய்ய மற்றும் தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகும் கூறுகளை அடையாளம் காண React DevTools-ஐப் பயன்படுத்தவும். experimental_useContextSelector சரியான தீர்வா என்பதைத் தீர்மானிக்க இது உங்களுக்கு உதவும்.

experimental_useContextSelector-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

experimental_useContextSelector-ஐ திறம்பட பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• Selectors-ஐ தூய்மையாக வைத்திருங்கள்: உங்கள் selector செயல்பாடுகள் தூய செயல்பாடுகளாக (pure functions) இருப்பதை உறுதி செய்யுங்கள். அவை Context மதிப்பை மட்டுமே சார்ந்திருக்க வேண்டும் மற்றும் எந்த பக்க விளைவுகளையும் கொண்டிருக்கக்கூடாது.
• தேவைப்பட்டால் Selectors-ஐ Memoize செய்யவும்: உங்கள் selector செயல்பாடு கணக்கீட்டு ரீதியாக செலவுமிக்கதாக இருந்தால், அதை useCallback-ஐப் பயன்படுத்தி memoize செய்வதைக் கருத்தில் கொள்ளுங்கள். இது தேர்ந்தெடுக்கப்பட்ட மதிப்பின் தேவையற்ற மறுகணக்கீடுகளைத் தடுக்கலாம்.
• ஆழமாக உட்பொதிக்கப்பட்ட Selectors-ஐத் தவிர்க்கவும்: உங்கள் selector செயல்பாடுகளை எளிமையாக வைத்திருங்கள் மற்றும் ஆழமாக உட்பொதிக்கப்பட்ட பொருள் அணுகலைத் தவிர்க்கவும். சிக்கலான selectors-ஐ பராமரிப்பது கடினமாக இருக்கலாம் மற்றும் செயல்திறன் தடைகளை ஏற்படுத்தக்கூடும்.
• முழுமையாகச் சோதிக்கவும்: தேர்ந்தெடுக்கப்பட்ட Context மதிப்புகள் மாறும்போது உங்கள் கூறுகள் சரியாக மீண்டும் ரெண்டர் ஆகின்றனவா என்பதை உறுதிப்படுத்த அவற்றைச் சோதிக்கவும்.

தனிப்பயன் Comparator (மேம்பட்ட பயன்பாடு)

இயல்பாக, experimental_useContextSelector தேர்ந்தெடுக்கப்பட்ட மதிப்பை முந்தைய மதிப்புடன் ஒப்பிடுவதற்கு Object.is-ஐப் பயன்படுத்துகிறது. சில சந்தர்ப்பங்களில், நீங்கள் ஒரு தனிப்பயன் comparator செயல்பாட்டைப் பயன்படுத்த வேண்டியிருக்கலாம். ஒரு மேலோட்டமான ஒப்பீடு (shallow comparison) போதுமானதாக இல்லாத சிக்கலான பொருள்களைக் கையாளும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

ஒரு தனிப்பயன் comparator-ஐப் பயன்படுத்த, நீங்கள் experimental_useContextSelector-ஐச் சுற்றி ஒரு wrapper hook-ஐ உருவாக்க வேண்டும்:

            import { experimental_useContextSelector as useContextSelector } from 'react';
import { useRef } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S,
  equalityFn: (a: S, b: S) => boolean
): S {
  const value = useContextSelector(context, selector);
  const ref = useRef(value);

  if (!equalityFn(ref.current, value)) {
    ref.current = value;
  }

  return ref.current;
}

export default useCustomContextSelector;

            

              
                Copy
              
            
          

இப்போது நீங்கள் experimental_useContextSelector-க்கு பதிலாக useCustomContextSelector-ஐப் பயன்படுத்தலாம், உங்கள் தனிப்பயன் சமத்துவ செயல்பாட்டை (equality function) உள்ளே அனுப்பலாம்.

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

            import React from 'react';
import ThemeContext from './ThemeContext';
import useCustomContextSelector from './useCustomContextSelector';

const MyComponent = () => {
  const theme = useCustomContextSelector(
    ThemeContext,
    (theme) => theme,
    (prevTheme, currentTheme) => {
      // Custom equality check: only re-render if primaryColor or fontSize changes
      return prevTheme?.primaryColor === currentTheme?.primaryColor && prevTheme?.fontSize === currentTheme?.fontSize;
    }
  );

  return (
    

      This text uses the primary color and font size from the theme.
    
  );
};

export default MyComponent;

            

              
                Copy
              
            
          

கருத்தில் கொள்ள வேண்டியவை மற்றும் வரம்புகள்

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

உலகளாவிய பார்வை மற்றும் பயன்பாட்டு வழக்குகள்

experimental_useContextSelector-இன் நன்மைகள் புவியியல் இருப்பிடம் அல்லது தொழில்துறையைப் பொருட்படுத்தாமல் உலகளாவியவை. இருப்பினும், குறிப்பிட்ட பயன்பாட்டு வழக்குகள் மாறுபடலாம். உதாரணமாக:

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

முடிவுரை

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

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