ರಿಯಾಕ್ಟ್ experimental_useContextSelector: ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ API ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಾದ್ಯಂತ ಡೇಟಾವನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಪ್ರಬಲವಾದ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದಕ್ಕಾಗಿ ಪ್ರಾಪ್ ಡ್ರಿಲ್ಲಿಂಗ್‌ನ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಆಗಾಗ್ಗೆ ಬದಲಾಗುತ್ತಿರುವ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಇಲ್ಲಿಯೇ experimental_useContextSelector ಉಪಯೋಗಕ್ಕೆ ಬರುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು experimental_useContextSelector ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

experimental_useContextSelector ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, ಅದು ಪರಿಹರಿಸಲು ಪ್ರಯತ್ನಿಸುವ ಮೂಲಭೂತ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಒಂದು ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯ ಬದಲಾದಾಗ, ಆ ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಬಳಸುವ ಎಲ್ಲಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮರು-ರೆಂಡರ್ ಆಗುತ್ತವೆ, ಅವು ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯದ ಒಂದು ಸಣ್ಣ ಭಾಗವನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತಿದ್ದರೂ ಸಹ. ಈ ವಿವೇಚನಾರಹಿತ ಮರು-ರೆಂಡರಿಂಗ್ ದೊಡ್ಡ ಮತ್ತು ಸಂಕೀರ್ಣ UIಗಳನ್ನು ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗಮನಾರ್ಹ ಅಡಚಣೆಯಾಗಬಹುದು.

ಒಂದು ಗ್ಲೋಬಲ್ ಥೀಮ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
  accentColor: 'blue'
});

function ThemedComponent() {
  const { theme, accentColor } = React.useContext(ThemeContext);
  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <p>Accent Color: {accentColor}</p>
    </div>
  );
}

function ThemeToggleButton() {
  const { toggleTheme } = React.useContext(ThemeContext);
  return (<button onClick={toggleTheme}>Toggle Theme</button>);
}

            

              
                Copy
              
            
          

ಒಂದುವೇಳೆ accentColor ಬದಲಾದರೆ, ThemeToggleButton ಕೂಡ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಆದರೂ ಅದು ಕೇವಲ toggleTheme ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್ ಸಂಪನ್ಮೂಲಗಳ ವ್ಯರ್ಥ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸಬಹುದು.

experimental_useContextSelector ಪರಿಚಯ

ರಿಯಾಕ್ಟ್‌ನ ಅಸ್ಥಿರ (ಪ್ರಾಯೋಗಿಕ) APIಗಳ ಭಾಗವಾಗಿರುವ experimental_useContextSelector, ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯದ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಿಗೆ ಮಾತ್ರ ಚಂದಾದಾರರಾಗಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಆಯ್ದ ಚಂದಾದಾರಿಕೆಯು ಒಂದು ಕಾಂಪೊನೆಂಟ್, ತಾನು ಬಳಸುವ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನ ಭಾಗಗಳು ನಿಜವಾಗಿಯೂ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಗಮನಾರ್ಹ ಸುಧಾರಣೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಪ್ರಮುಖ ಸೂಚನೆ: experimental_useContextSelector ಒಂದು ಪ್ರಾಯೋಗಿಕ API ಆಗಿರುವುದರಿಂದ, ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಇದು ಬದಲಾವಣೆಗೆ ಅಥವಾ ತೆಗೆದುಹಾಕುವಿಕೆಗೆ ಒಳಪಟ್ಟಿರಬಹುದು. ಇದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಲು ಸಿದ್ಧರಾಗಿರಿ.

experimental_useContextSelector ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

experimental_useContextSelector ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ:

1. ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಬ್ಜೆಕ್ಟ್: React.createContext ಬಳಸಿ ನೀವು ರಚಿಸಿದ ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಬ್ಜೆಕ್ಟ್.
2. ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್: ಸಂಪೂರ್ಣ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯವನ್ನು ಇನ್‌ಪುಟ್ ಆಗಿ ಸ್ವೀಕರಿಸಿ, ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಬೇಕಾದ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳನ್ನು ಹಿಂತಿರುಗಿಸುವ ಫಂಕ್ಷನ್.

ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಒಂದು ಫಿಲ್ಟರ್‌ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಿಂದ ಸಂಬಂಧಿತ ಡೇಟಾವನ್ನು ಮಾತ್ರ ಹೊರತೆಗೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನಂತರ ರಿಯಾಕ್ಟ್ ಈ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸಿ, ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯ ಬದಲಾದಾಗ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗಬೇಕೇ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.

experimental_useContextSelector ಅನ್ನು ಅಳವಡಿಸುವುದು

ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು experimental_useContextSelector ಬಳಸಿ ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡೋಣ:

            import { unstable_useContextSelector as useContextSelector } from 'react';

const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
  accentColor: 'blue'
});

function ThemedComponent() {
  const { theme, accentColor } = useContextSelector(ThemeContext, (value) => ({
    theme: value.theme,
    accentColor: value.accentColor
  }));

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <p>Accent Color: {accentColor}</p>
    </div>
  );
}

function ThemeToggleButton() {
  const toggleTheme = useContextSelector(ThemeContext, (value) => value.toggleTheme);
  return (<button onClick={toggleTheme}>Toggle Theme</button>);
}

            

              
                Copy
              
            
          

ಈ ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿದ ಕೋಡ್‌ನಲ್ಲಿ:

• ನಾವು unstable_useContextSelector ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ, ಸಂಕ್ಷಿಪ್ತತೆಗಾಗಿ ಅದನ್ನು useContextSelector ಎಂದು ಮರುಹೆಸರಿಸಿದ್ದೇವೆ.
• ThemedComponent ನಲ್ಲಿ, ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಿಂದ ಕೇವಲ theme ಮತ್ತು accentColor ಅನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ.
• ThemeToggleButton ನಲ್ಲಿ, ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಿಂದ ಕೇವಲ toggleTheme ಅನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ.

ಈಗ, accentColor ಬದಲಾದರೆ, ThemeToggleButton ಇನ್ನು ಮುಂದೆ ಮರು-ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅದರ ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಕೇವಲ toggleTheme ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ಇದು experimental_useContextSelector ಹೇಗೆ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

experimental_useContextSelector ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು

• ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಸೂಕ್ಷ್ಮ-ನಿಯಂತ್ರಿತ ನಿಯಂತ್ರಣ: ಕಾಂಟೆಕ್ಸ್ಟ್ ಬದಲಾದಾಗ ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮರು-ರೆಂಡರ್ ಆಗಬೇಕು ಎಂಬುದರ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಸರಳೀಕೃತ ಆಪ್ಟಿಮೈಸೇಶನ್: ಸಂಕೀರ್ಣ ಮೆಮೊೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಆಶ್ರಯಿಸದೆ ಕಾಂಟೆಕ್ಸ್ಟ್ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನೇರವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ.

ಪರಿಗಣನೆಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲಗಳು

• ಪ್ರಾಯೋಗಿಕ API: ಒಂದು ಪ್ರಾಯೋಗಿಕ API ಆಗಿರುವುದರಿಂದ, experimental_useContextSelector ಬದಲಾವಣೆ ಅಥವಾ ತೆಗೆದುಹಾಕುವಿಕೆಗೆ ಒಳಪಟ್ಟಿರಬಹುದು. ರಿಯಾಕ್ಟ್‌ನ ಬಿಡುಗಡೆ ಟಿಪ್ಪಣಿಗಳನ್ನು ಗಮನಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿಕೊಳ್ಳಲು ಸಿದ್ಧರಾಗಿರಿ.
• ಹೆಚ್ಚಿದ ಸಂಕೀರ್ಣತೆ: ಸಾಮಾನ್ಯವಾಗಿ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಸರಳಗೊಳಿಸಿದರೂ, ಇದು ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಸ್ವಲ್ಪ ಸಂಕೀರ್ಣತೆಯ ಪದರವನ್ನು ಸೇರಿಸಬಹುದು. ಅದನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೊದಲು, ಪ್ರಯೋಜನಗಳು ಸೇರಿಸಿದ ಸಂಕೀರ್ಣತೆಗಿಂತ ಹೆಚ್ಚಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಕಾರ್ಯಕ್ಷಮತೆಯಿಂದ ಕೂಡಿರಬೇಕು. ಸೆಲೆಕ್ಟರ್ ಒಳಗೆ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳು ಅಥವಾ ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಯೋಜನಗಳನ್ನು ನಿರಾಕರಿಸಬಹುದು.
• ಹಳೆಯ ಕ್ಲೋಶರ್‌ಗಳ ಸಂಭವನೀಯತೆ: ನಿಮ್ಮ ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ ಸಂಭಾವ್ಯ ಹಳೆಯ ಕ್ಲೋಶರ್‌ಗಳ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ. ನಿಮ್ಮ ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳು ಇತ್ತೀಚಿನ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅಗತ್ಯವಿದ್ದರೆ ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡಲು useCallback ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

experimental_useContextSelector ಈ ಕೆಳಗಿನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ:

• ದೊಡ್ಡ ಫಾರ್ಮ್‌ಗಳು: ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವಾಗ, ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳಿಂದ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುವ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಮಾಡಲು experimental_useContextSelector ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಚೆಕ್‌ಔಟ್ ಫಾರ್ಮ್ ವಿಳಾಸ, ಪಾವತಿ ಮತ್ತು ಶಿಪ್ಪಿಂಗ್ ಆಯ್ಕೆಯ ಬದಲಾವಣೆಗಳ ಮೇಲಿನ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೂಲಕ ಇದರಿಂದ ಅಪಾರ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು.
• ಸಂಕೀರ್ಣ ಡೇಟಾ ಗ್ರಿಡ್‌ಗಳು: ಹಲವಾರು ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಾಲುಗಳಿರುವ ಡೇಟಾ ಗ್ರಿಡ್‌ಗಳಲ್ಲಿ, ನಿರ್ದಿಷ್ಟ ಸೆಲ್‌ಗಳು ಅಥವಾ ಸಾಲುಗಳು ಮಾತ್ರ ನವೀಕರಿಸಿದಾಗ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು experimental_useContextSelector ಬಳಸಿ. ನೈಜ-ಸಮಯದ ಸ್ಟಾಕ್ ಬೆಲೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಹಣಕಾಸು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್, ಸಂಪೂರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡದೆಯೇ ವೈಯಕ್ತಿಕ ಸ್ಟಾಕ್ ಟಿಕ್ಕರ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನವೀಕರಿಸಲು ಇದನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.
• ಥೀಮಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳು: ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿದಂತೆ, ಥೀಮ್ ಬದಲಾದಾಗ ನಿರ್ದಿಷ್ಟ ಥೀಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು experimental_useContextSelector ಬಳಸಿ. ದೊಡ್ಡ ಸಂಸ್ಥೆಯ ಜಾಗತಿಕ ಸ್ಟೈಲ್ ಗೈಡ್, ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಗುವ ಸಂಕೀರ್ಣ ಥೀಮ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು, ಈ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ನಿರ್ಣಾಯಕವಾಗಿಸುತ್ತದೆ.
• ದೃಢೀಕರಣ ಕಾಂಟೆಕ್ಸ್ಟ್: ದೃಢೀಕರಣ ಸ್ಥಿತಿಯನ್ನು (ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರ ಲಾಗಿನ್ ಸ್ಥಿತಿ, ಬಳಕೆದಾರರ ಪಾತ್ರಗಳು) ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ನಿರ್ವಹಿಸುವಾಗ, ದೃಢೀಕರಣ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಮಾಡಲು experimental_useContextSelector ಬಳಸಿ. ವಿವಿಧ ಖಾತೆ ಪ್ರಕಾರಗಳು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡುವ ಚಂದಾದಾರಿಕೆ-ಆಧಾರಿತ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಬಳಕೆದಾರರ ಚಂದಾದಾರಿಕೆ ಪ್ರಕಾರದಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಅನ್ವಯವಾಗುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಮಾತ್ರ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
• ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n) ಕಾಂಟೆಕ್ಸ್ಟ್: ಪ್ರಸ್ತುತ ಆಯ್ಕೆಮಾಡಿದ ಭಾಷೆ ಅಥವಾ ಲೊಕೇಲ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ನಿರ್ವಹಿಸುವಾಗ, ಪಠ್ಯ ವಿಷಯವನ್ನು ನವೀಕರಿಸಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಮಾಡಲು experimental_useContextSelector ಬಳಸಿ. ಬಹು ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಪ್ರಯಾಣ ಬುಕಿಂಗ್ ವೆಬ್‌ಸೈಟ್, ಇತರ ಸೈಟ್ ಅಂಶಗಳ ಮೇಲೆ ಅನಗತ್ಯವಾಗಿ ಪರಿಣಾಮ ಬೀರದೆ UI ಅಂಶಗಳ ಮೇಲಿನ ಪಠ್ಯವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ಇದನ್ನು ಬಳಸಬಹುದು.

experimental_useContextSelector ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಪ್ರೊಫೈಲಿಂಗ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: experimental_useContextSelector ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು, ಕಾಂಟೆಕ್ಸ್ಟ್ ಬದಲಾವಣೆಗಳಿಂದಾಗಿ ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್ ಪ್ರಯತ್ನಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಗುರಿಯಾಗಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸರಳವಾಗಿಡಿ: ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳು ಸಾಧ್ಯವಾದಷ್ಟು ಸರಳ ಮತ್ತು ಸಮರ್ಥವಾಗಿರಬೇಕು. ಸೆಲೆಕ್ಟರ್ ಒಳಗೆ ಸಂಕೀರ್ಣ ತರ್ಕ ಅಥವಾ ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಪ್ಪಿಸಿ.
• ಅಗತ್ಯವಿದ್ದಾಗ ಮೆಮೊೈಸೇಶನ್ ಬಳಸಿ: ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಆಗಾಗ್ಗೆ ಬದಲಾಗಬಹುದಾದ ಇತರ ವೇರಿಯಬಲ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದರೆ, ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡಲು useCallback ಬಳಸಿ.
• ನಿಮ್ಮ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಅಥವಾ ರಿಗ್ರೆಶನ್‌ಗಳನ್ನು ತಡೆಗಟ್ಟಲು ನಿಮ್ಮ experimental_useContextSelector ನ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಪರ್ಯಾಯಗಳನ್ನು ಪರಿಗಣಿಸಿ: experimental_useContextSelector ಅನ್ನು ಆಶ್ರಯಿಸುವ ಮೊದಲು, React.memo ಅಥವಾ useMemo ನಂತಹ ಇತರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ. ಕೆಲವೊಮ್ಮೆ ಸರಳವಾದ ಪರಿಹಾರಗಳು ಅಪೇಕ್ಷಿತ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗಳನ್ನು ಸಾಧಿಸಬಹುದು.
• ನಿಮ್ಮ ಬಳಕೆಯನ್ನು ದಾಖಲಿಸಿ: ನೀವು experimental_useContextSelector ಅನ್ನು ಎಲ್ಲಿ ಮತ್ತು ಏಕೆ ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ದಾಖಲಿಸಿ. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಭವಿಷ್ಯದಲ್ಲಿ ಅದನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಇತರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಹೋಲಿಕೆ

experimental_useContextSelector ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದರೂ, ಇದು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿನ ಇತರ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಿಗೆ ಹೇಗೆ ಹೋಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ:

• React.memo: React.memo ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು ಅದು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೆ (ಶಾಲೋ ಕಂಪ್ಯಾರಿಸನ್) ಇದು ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ. experimental_useContextSelector ಗಿಂತ ಭಿನ್ನವಾಗಿ, React.memo ಕಾಂಟೆಕ್ಸ್ಟ್ ಬದಲಾವಣೆಗಳ ಮೇಲೆ ಅಲ್ಲ, ಪ್ರಾಪ್ ಬದಲಾವಣೆಗಳ ಆಧಾರದ ಮೇಲೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತದೆ. ಇದು ಆಗಾಗ್ಗೆ ಪ್ರಾಪ್ಸ್ ಪಡೆಯುವ ಮತ್ತು ರೆಂಡರ್ ಮಾಡಲು ದುಬಾರಿಯಾಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.
• useMemo: useMemo ಒಂದು ಹುಕ್ ಆಗಿದ್ದು, ಇದು ಫಂಕ್ಷನ್ ಕರೆಯ ಫಲಿತಾಂಶವನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾಗದ ಹೊರತು ಫಂಕ್ಷನ್ ಅನ್ನು ಮರು-ಕಾರ್ಯಗತಗೊಳಿಸುವುದನ್ನು ಇದು ತಡೆಯುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ಪಡೆದ ಡೇಟಾವನ್ನು ಮೆಮೊೈಸ್ ಮಾಡಲು, ಅನಗತ್ಯ ಮರು-ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಡೆಯಲು ನೀವು useMemo ಅನ್ನು ಬಳಸಬಹುದು.
• useCallback: useCallback ಒಂದು ಹುಕ್ ಆಗಿದ್ದು, ಇದು ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ. ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾಗದ ಹೊರತು ಫಂಕ್ಷನ್ ಅನ್ನು ಮರು-ರಚಿಸುವುದನ್ನು ಇದು ತಡೆಯುತ್ತದೆ. ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ರವಾನಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅವು ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
• Redux ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳು (Reselect ನೊಂದಿಗೆ): Redux ನಂತಹ ಲೈಬ್ರರಿಗಳು Redux ಸ್ಟೋರ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಸಮರ್ಥವಾಗಿ ಪಡೆಯಲು ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು (ಆಗಾಗ್ಗೆ Reselect ನೊಂದಿಗೆ) ಬಳಸುತ್ತವೆ. ಈ ಸೆಲೆಕ್ಟರ್‌ಗಳು experimental_useContextSelector ನೊಂದಿಗೆ ಬಳಸುವ ಸೆಲೆಕ್ಟರ್ ಫಂಕ್ಷನ್‌ಗಳ ಪರಿಕಲ್ಪನೆಯಲ್ಲಿ ಹೋಲುತ್ತವೆ, ಆದರೆ ಅವು Redux ಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿವೆ ಮತ್ತು Redux ಸ್ಟೋರ್‌ನ ಸ್ಟೇಟ್ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

ಉತ್ತಮ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರವು ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಾಧಿಸಲು ಈ ತಂತ್ರಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಕೋಡ್ ಉದಾಹರಣೆ: ಒಂದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶ

ಒಂದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸೋಣ: ಗ್ಲೋಬಲ್ ಟಾಸ್ಕ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ಟಾಸ್ಕ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಅಪ್ಲಿಕೇಶನ್.

            import { unstable_useContextSelector as useContextSelector } from 'react';

const TaskContext = React.createContext({
  tasks: [],
  addTask: () => {},
  updateTaskStatus: () => {},
  deleteTask: () => {},
  filter: 'all',
  setFilter: () => {}
});

function TaskList() {
  const filteredTasks = useContextSelector(TaskContext, (value) => {
    switch (value.filter) {
      case 'active':
        return value.tasks.filter((task) => !task.completed);
      case 'completed':
        return value.tasks.filter((task) => task.completed);
      default:
        return value.tasks;
    }
  });

  return (
    <ul>
      {filteredTasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

function TaskFilter() {
  const { filter, setFilter } = useContextSelector(TaskContext, (value) => ({
    filter: value.filter,
    setFilter: value.setFilter
  }));

  return (
    <div>
      <button onClick={() => setFilter('all')}>All</button>
      <button onClick={() => setFilter('active')}>Active</button>
      <button onClick={() => setFilter('completed')}>Completed</button>
    </div>
  );
}

function TaskAdder() {
  const addTask = useContextSelector(TaskContext, (value) => value.addTask);
  const [newTaskTitle, setNewTaskTitle] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTask({ id: Date.now(), title: newTaskTitle, completed: false });
    setNewTaskTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newTaskTitle}
        onChange={(e) => setNewTaskTitle(e.target.value)}
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• TaskList ಕೇವಲ filter ಅಥವಾ tasks ಅರೇ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.
• TaskFilter ಕೇವಲ filter ಅಥವಾ setFilter ಫಂಕ್ಷನ್ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.
• TaskAdder ಕೇವಲ addTask ಫಂಕ್ಷನ್ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಈ ಆಯ್ದ ರೆಂಡರಿಂಗ್, ಟಾಸ್ಕ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಗಾಗ್ಗೆ ಬದಲಾದಾಗಲೂ, ನವೀಕರಿಸಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

experimental_useContextSelector ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಬಳಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವಾಗಿದೆ. ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯದ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಿಗೆ ಆಯ್ದವಾಗಿ ಚಂದಾದಾರರಾಗುವ ಮೂಲಕ, ನೀವು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ಇದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಲು, ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಈ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು ಮತ್ತು ನಂತರ ಯಾವಾಗಲೂ ಪ್ರೊಫೈಲ್ ಮಾಡಿ, ಅದು ಗಮನಾರ್ಹ ವ್ಯತ್ಯಾಸವನ್ನು ಮಾಡುತ್ತಿದೆಯೇ ಮತ್ತು ಯಾವುದೇ ಅನಿರೀಕ್ಷಿತ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ರಿಯಾಕ್ಟ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವಂತೆ, ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಬಗ್ಗೆ ಮಾಹಿತಿ ಹೊಂದಿರುವುದು ಬಹಳ ಮುಖ್ಯ. experimental_useContextSelector ನಂತಹ ಕಾಂಟೆಕ್ಸ್ಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಪಡೆಯುವುದು ಹೆಚ್ಚು ದಕ್ಷ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಹೆಚ್ಚಿನ ಅನ್ವೇಷಣೆ

• ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್: ಪ್ರಾಯೋಗಿಕ APIಗಳ ಕುರಿತು ನವೀಕರಣಗಳಿಗಾಗಿ ಅಧಿಕೃತ ರಿಯಾಕ್ಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಮೇಲೆ ಕಣ್ಣಿಡಿ.
• ಸಮುದಾಯ ವೇದಿಕೆಗಳು: experimental_useContextSelector ನೊಂದಿಗೆ ಇತರ ಡೆವಲಪರ್‌ಗಳ ಅನುಭವಗಳಿಂದ ಕಲಿಯಲು ಫೋರಮ್‌ಗಳು ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮಗಳಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಸಮುದಾಯದೊಂದಿಗೆ ತೊಡಗಿಸಿಕೊಳ್ಳಿ.
• ಪ್ರಯೋಗ: ಇದರ ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಮಿತಿಗಳ ಬಗ್ಗೆ ಆಳವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳಲ್ಲಿ experimental_useContextSelector ನೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ.