2025, ഓഗസ്റ്റ് 29മലയാളം

React-ൻ്റെ useContext ഹുക്കിനെക്കുറിച്ചുള്ള ഒരു സമ്പൂർണ്ണ ഗൈഡ്. സ്കേലബിളും കാര്യക്ഷമവുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് കോൺടെക്സ്റ്റ് ഉപയോഗരീതികളും നൂതന പ്രകടന ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളും ഇതിൽ ഉൾപ്പെടുന്നു.

React useContext: കോൺടെക്സ്റ്റ് ഉപയോഗവും പ്രകടനമികവും മെച്ചപ്പെടുത്താം

കമ്പോണൻ്റ് ട്രീയുടെ ഓരോ തലത്തിലൂടെയും പ്രോപ്‌സ് (props) കൈമാറാതെ തന്നെ കമ്പോണൻ്റുകൾക്കിടയിൽ ഡാറ്റ പങ്കിടാൻ React-ൻ്റെ Context API ശക്തമായ ഒരു മാർഗ്ഗം നൽകുന്നു. useContext ഹുക്ക്, കോൺടെക്സ്റ്റ് വാല്യൂകളുടെ ഉപയോഗം ലളിതമാക്കുന്നു, ഇത് ഫംഗ്ഷണൽ കമ്പോണൻ്റുകൾക്കുള്ളിൽ പങ്കിട്ട ഡാറ്റ ആക്‌സസ് ചെയ്യാനും ഉപയോഗിക്കാനും എളുപ്പമാക്കുന്നു. എന്നിരുന്നാലും, useContext-ൻ്റെ തെറ്റായ ഉപയോഗം, പ്രത്യേകിച്ച് വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകളിൽ, പ്രകടനത്തിലെ തടസ്സങ്ങൾക്ക് (performance bottlenecks) കാരണമാകും. ഈ ഗൈഡ് കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ വിശദീകരിക്കുകയും കാര്യക്ഷമവും സ്കേലബിളുമായ React ആപ്ലിക്കേഷനുകൾ ഉറപ്പാക്കാൻ നൂതന ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ നൽകുകയും ചെയ്യുന്നു.

React-ൻ്റെ Context API മനസ്സിലാക്കാം

useContext-ലേക്ക് കടക്കുന്നതിന് മുമ്പ്, Context API-യുടെ പ്രധാന ആശയങ്ങൾ നമുക്ക് ഹ്രസ്വമായി അവലോകനം ചെയ്യാം. Context API-ക്ക് പ്രധാനമായും മൂന്ന് ഭാഗങ്ങളുണ്ട്:

Context: പങ്കിട്ട ഡാറ്റയ്ക്കുള്ള കണ്ടെയ്നർ. React.createContext() ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു കോൺടെക്സ്റ്റ് ഉണ്ടാക്കാം.
Provider: അതിൻ്റെ താഴെയുള്ള കമ്പോണൻ്റുകൾക്ക് കോൺടെക്സ്റ്റ് വാല്യൂ നൽകുന്ന ഒരു കമ്പോണൻ്റ്. പ്രൊവൈഡറിനുള്ളിൽ വരുന്ന എല്ലാ കമ്പോണൻ്റുകൾക്കും കോൺടെക്സ്റ്റ് വാല്യൂ ആക്സസ് ചെയ്യാൻ കഴിയും.
Consumer: കോൺടെക്സ്റ്റ് വാല്യൂവിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യുകയും കോൺടെക്സ്റ്റ് വാല്യൂ മാറുമ്പോഴെല്ലാം റീ-റെൻഡർ ചെയ്യുകയും ചെയ്യുന്ന ഒരു കമ്പോണൻ്റ്. ഫംഗ്ഷണൽ കമ്പോണൻ്റുകളിൽ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്നതിനുള്ള ആധുനിക മാർഗ്ഗമാണ് useContext ഹുക്ക്.

useContext ഹുക്ക് പരിചയപ്പെടാം

useContext ഹുക്ക് ഒരു React ഹുക്കാണ്, ഇത് ഫംഗ്ഷണൽ കമ്പോണൻ്റുകളെ ഒരു കോൺടെക്സ്റ്റിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യാൻ അനുവദിക്കുന്നു. ഇത് ഒരു കോൺടെക്സ്റ്റ് ഒബ്ജക്റ്റ് (React.createContext() തിരികെ നൽകുന്ന വാല്യൂ) സ്വീകരിക്കുകയും ആ കോൺടെക്സ്റ്റിൻ്റെ നിലവിലെ കോൺടെക്സ്റ്റ് വാല്യൂ തിരികെ നൽകുകയും ചെയ്യുന്നു. കോൺടെക്സ്റ്റ് വാല്യൂ മാറുമ്പോൾ, കമ്പോണൻ്റ് റീ-റെൻഡർ ആകുന്നു.

ഇവിടെ ഒരു അടിസ്ഥാന ഉദാഹരണം നൽകുന്നു:

അടിസ്ഥാന ഉദാഹരണം

നിങ്ങൾക്ക് ഒരു തീം കോൺടെക്സ്റ്റ് ഉണ്ടെന്ന് കരുതുക:


import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    toggleTheme,
  };

  return (
    
      {children}
    
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Current Theme: {theme}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ:

React.createContext('light') ഉപയോഗിച്ച് ThemeContext ഉണ്ടാക്കുന്നു. ഡിഫോൾട്ട് വാല്യൂ 'light' ആണ്.
ThemeProvider അതിൻ്റെ ചിൽഡ്രൻ കമ്പോണൻ്റുകൾക്ക് തീം വാല്യൂവും ഒരു toggleTheme ഫംഗ്ഷനും നൽകുന്നു.
ThemedComponent നിലവിലെ തീമും toggleTheme ഫംഗ്ഷനും ആക്സസ് ചെയ്യാൻ useContext(ThemeContext) ഉപയോഗിക്കുന്നു.

സാധാരണയായുള്ള പിഴവുകളും പ്രകടന പ്രശ്നങ്ങളും

useContext കോൺടെക്സ്റ്റ് ഉപയോഗം ലളിതമാക്കുന്നുണ്ടെങ്കിലും, ശ്രദ്ധയോടെ ഉപയോഗിച്ചില്ലെങ്കിൽ അത് പ്രകടന പ്രശ്നങ്ങൾക്ക് കാരണമാകും. സാധാരണയായി കാണുന്ന ചില പിഴവുകൾ താഴെ പറയുന്നവയാണ്:

അനാവശ്യമായ റീ-റെൻഡറുകൾ: useContext ഉപയോഗിക്കുന്ന ഏതൊരു കമ്പോണൻ്റും, കോൺടെക്സ്റ്റ് വാല്യൂ മാറുമ്പോഴെല്ലാം റീ-റെൻഡർ ചെയ്യും, കമ്പോണൻ്റ് യഥാർത്ഥത്തിൽ കോൺടെക്സ്റ്റ് വാല്യൂവിൻ്റെ മാറിയ ഭാഗം ഉപയോഗിക്കുന്നില്ലെങ്കിൽ പോലും. ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾക്കും പ്രകടനത്തിലെ തടസ്സങ്ങൾക്കും ഇടയാക്കും, പ്രത്യേകിച്ച് പതിവായി അപ്ഡേറ്റ് ചെയ്യുന്ന കോൺടെക്സ്റ്റ് വാല്യൂകളുള്ള വലിയ ആപ്ലിക്കേഷനുകളിൽ.
വലിയ കോൺടെക്സ്റ്റ് വാല്യൂകൾ: കോൺടെക്സ്റ്റ് വാല്യൂ ഒരു വലിയ ഒബ്ജക്റ്റ് ആണെങ്കിൽ, ആ ഒബ്ജക്റ്റിനുള്ളിലെ ഏതെങ്കിലും പ്രോപ്പർട്ടിയിലെ മാറ്റം അത് ഉപയോഗിക്കുന്ന എല്ലാ കമ്പോണൻ്റുകളുടെയും റീ-റെൻഡറിന് കാരണമാകും.
പതിവായ അപ്ഡേറ്റുകൾ: കോൺടെക്സ്റ്റ് വാല്യൂ പതിവായി അപ്ഡേറ്റ് ചെയ്യുകയാണെങ്കിൽ, അത് കമ്പോണൻ്റ് ട്രീയിലുടനീളം തുടർച്ചയായ റീ-റെൻഡറുകൾക്ക് കാരണമാവുകയും പ്രകടനത്തെ ബാധിക്കുകയും ചെയ്യും.

പ്രകടനം മെച്ചപ്പെടുത്താനുള്ള ടെക്നിക്കുകൾ

ഈ പ്രകടന പ്രശ്നങ്ങൾ ലഘൂകരിക്കുന്നതിന്, ഇനിപ്പറയുന്ന ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ പരിഗണിക്കുക:

1. കോൺടെക്സ്റ്റ് വിഭജിക്കൽ (Context Splitting)

ബന്ധപ്പെട്ട എല്ലാ ഡാറ്റയും ഒരൊറ്റ കോൺടെക്സ്റ്റിൽ വെക്കുന്നതിന് പകരം, കോൺടെക്സ്റ്റിനെ ചെറുതും കൂടുതൽ സൂക്ഷ്മവുമായ കോൺടെക്സ്റ്റുകളായി വിഭജിക്കുക. ഡാറ്റയുടെ ഒരു പ്രത്യേക ഭാഗം മാറുമ്പോൾ റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണൻ്റുകളുടെ എണ്ണം ഇത് കുറയ്ക്കുന്നു.

ഉദാഹരണം:

ഉപയോക്താവിൻ്റെ പ്രൊഫൈൽ വിവരങ്ങളും ക്രമീകരണങ്ങളും അടങ്ങുന്ന ഒരൊറ്റ UserContext-ന് പകരം, ഓരോന്നിനും വെവ്വേറെ കോൺടെക്സ്റ്റുകൾ ഉണ്ടാക്കുക:


import React, { createContext, useContext, useState } from 'react';

const UserProfileContext = createContext(null);
const UserSettingsContext = createContext(null);

function UserProfileProvider({ children }) {
  const [profile, setProfile] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateProfile = (newProfile) => {
    setProfile(newProfile);
  };

  const value = {
    profile,
    updateProfile,
  };

  return (
    
      {children}
    
  );
}

function UserSettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    notificationsEnabled: true,
    theme: 'light',
  });

  const updateSettings = (newSettings) => {
    setSettings(newSettings);
  };

  const value = {
    settings,
    updateSettings,
  };

  return (
    
      {children}
    
  );
}

function ProfileComponent() {
  const { profile } = useContext(UserProfileContext);

  return (
    
      Name: {profile?.name}
      Email: {profile?.email}
    
  );
}

function SettingsComponent() {
  const { settings } = useContext(UserSettingsContext);

  return (
    
      Notifications: {settings?.notificationsEnabled ? 'Enabled' : 'Disabled'}
      Theme: {settings?.theme}
    
  );
}

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

ഇപ്പോൾ, ഉപയോക്തൃ പ്രൊഫൈലിലെ മാറ്റങ്ങൾ UserProfileContext ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകളെ മാത്രം റീ-റെൻഡർ ചെയ്യും, കൂടാതെ ഉപയോക്തൃ ക്രമീകരണങ്ങളിലെ മാറ്റങ്ങൾ UserSettingsContext ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകളെ മാത്രം റീ-റെൻഡർ ചെയ്യും.

2. React.memo ഉപയോഗിച്ചുള്ള മെമ്മോയിസേഷൻ

കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകളെ React.memo ഉപയോഗിച്ച് പൊതിയുക. React.memo ഒരു ഫംഗ്ഷണൽ കമ്പോണൻ്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണൻ്റ് ആണ്. കമ്പോണൻ്റിൻ്റെ പ്രോപ്‌സ് മാറിയിട്ടില്ലെങ്കിൽ അത് റീ-റെൻഡറുകൾ തടയുന്നു. കോൺടെക്സ്റ്റ് വിഭജനവുമായി സംയോജിപ്പിക്കുമ്പോൾ, ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ ഗണ്യമായി കുറയ്ക്കാൻ സഹായിക്കും.

ഉദാഹരണം:


import React, { useContext } from 'react';

const MyContext = React.createContext(null);

const MyComponent = React.memo(function MyComponent() {
  const { value } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Value: {value}
    
  );
});

export default MyComponent;

ഈ ഉദാഹരണത്തിൽ, MyContext-ലെ value മാറുമ്പോൾ മാത്രമേ MyComponent റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ.

3. useMemo, useCallback എന്നിവയുടെ ഉപയോഗം

കോൺടെക്സ്റ്റ് വാല്യൂകളായി കൈമാറുന്ന വാല്യൂകളെയും ഫംഗ്ഷനുകളെയും മെമ്മോയിസ് ചെയ്യാൻ useMemo, useCallback എന്നിവ ഉപയോഗിക്കുക. അടിസ്ഥാന ഡിപൻഡൻസികൾ മാറുമ്പോൾ മാത്രം കോൺടെക്സ്റ്റ് വാല്യൂ മാറുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു, അതുവഴി അത് ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകളുടെ അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നു.

ഉദാഹരണം:


import React, { createContext, useState, useMemo, useCallback, useContext } from 'react';

const MyContext = createContext(null);

function MyProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const contextValue = useMemo(() => ({
    count,
    increment,
  }), [count, increment]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const { count, increment } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ:

useCallback, increment ഫംഗ്ഷനെ മെമ്മോയിസ് ചെയ്യുന്നു, അതിൻ്റെ ഡിപൻഡൻസികൾ മാറുമ്പോൾ മാത്രം അത് മാറുന്നുവെന്ന് ഉറപ്പാക്കുന്നു (ഈ സാഹചര്യത്തിൽ, അതിന് ഡിപൻഡൻസികളൊന്നുമില്ല, അതിനാൽ അത് അനിശ്ചിതമായി മെമ്മോയിസ് ചെയ്യപ്പെടുന്നു).
useMemo കോൺടെക്സ്റ്റ് വാല്യൂവിനെ മെമ്മോയിസ് ചെയ്യുന്നു, count അല്ലെങ്കിൽ increment ഫംഗ്ഷൻ മാറുമ്പോൾ മാത്രം അത് മാറുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

4. സെലക്ടറുകൾ (Selectors)

കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകൾക്കുള്ളിൽ കോൺടെക്സ്റ്റ് വാല്യൂവിൽ നിന്ന് ആവശ്യമായ ഡാറ്റ മാത്രം വേർതിരിച്ചെടുക്കാൻ സെലക്ടറുകൾ ഉപയോഗിക്കുക. കമ്പോണൻ്റുകൾ ആശ്രയിക്കുന്ന നിർദ്ദിഷ്ട ഡാറ്റ മാറുമ്പോൾ മാത്രം അവ റീ-റെൻഡർ ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നതിലൂടെ അനാവശ്യ റീ-റെൻഡറുകളുടെ സാധ്യത ഇത് കുറയ്ക്കുന്നു.

ഉദാഹരണം:


import React, { createContext, useContext } from 'react';

const MyContext = createContext(null);

const selectCount = (contextValue) => contextValue.count;

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = selectCount(contextValue);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

export default MyComponent;

ഈ ഉദാഹരണം ലളിതമാണെങ്കിലും, യഥാർത്ഥ സാഹചര്യങ്ങളിൽ, സെലക്ടറുകൾ കൂടുതൽ സങ്കീർണ്ണവും കാര്യക്ഷമവുമാകാം, പ്രത്യേകിച്ച് വലിയ കോൺടെക്സ്റ്റ് വാല്യൂകൾ കൈകാര്യം ചെയ്യുമ്പോൾ.

5. മാറ്റാനാവാത്ത ഡാറ്റാ ഘടനകൾ (Immutable Data Structures)

മാറ്റാനാവാത്ത ഡാറ്റാ ഘടനകൾ ഉപയോഗിക്കുന്നത്, കോൺടെക്സ്റ്റ് വാല്യൂവിലെ മാറ്റങ്ങൾ നിലവിലുള്ള ഒബ്ജക്റ്റുകളെ പരിഷ്കരിക്കുന്നതിനു പകരം പുതിയ ഒബ്ജക്റ്റുകൾ സൃഷ്ടിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ഇത് React-ന് മാറ്റങ്ങൾ കണ്ടെത്താനും റീ-റെൻഡറുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാനും എളുപ്പമാക്കുന്നു. Immutable.js പോലുള്ള ലൈബ്രറികൾ മാറ്റാനാവാത്ത ഡാറ്റാ ഘടനകൾ കൈകാര്യം ചെയ്യാൻ സഹായകമാണ്.

ഉദാഹരണം:


import React, { createContext, useState, useMemo, useContext } from 'react';
import { Map } from 'immutable';

const MyContext = createContext(Map());

function MyProvider({ children }) {
  const [data, setData] = useState(Map({
    count: 0,
    name: 'Initial Name',
  }));

  const increment = () => {
    setData(prevData => prevData.set('count', prevData.get('count') + 1));
  };

  const updateName = (newName) => {
    setData(prevData => prevData.set('name', newName));
  };

  const contextValue = useMemo(() => ({
    data,
    increment,
    updateName,
  }), [data]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = contextValue.get('count');

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

ഈ ഉദാഹരണം കോൺടെക്സ്റ്റ് ഡാറ്റ കൈകാര്യം ചെയ്യാൻ Immutable.js ഉപയോഗിക്കുന്നു, ഓരോ അപ്ഡേറ്റും പുതിയതും മാറ്റാനാവാത്തതുമായ ഒരു Map ഉണ്ടാക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് React-ന് റീ-റെൻഡറുകൾ കൂടുതൽ കാര്യക്ഷമമായി ഒപ്റ്റിമൈസ് ചെയ്യാൻ സഹായിക്കുന്നു.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും ഉപയോഗ സാഹചര്യങ്ങളും

Context API-യും useContext-ഉം വിവിധ യഥാർത്ഥ ലോക സാഹചര്യങ്ങളിൽ വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നു:

തീം മാനേജ്മെൻ്റ്: മുമ്പത്തെ ഉദാഹരണത്തിൽ കാണിച്ചതുപോലെ, ആപ്ലിക്കേഷനിലുടനീളം തീമുകൾ (ലൈറ്റ്/ഡാർക്ക് മോഡ്) കൈകാര്യം ചെയ്യുന്നു.
ഓതൻ്റിക്കേഷൻ: ആവശ്യമുള്ള കമ്പോണൻ്റുകൾക്ക് ഉപയോക്താവിൻ്റെ ഓതൻ്റിക്കേഷൻ സ്റ്റാറ്റസും ഡാറ്റയും നൽകുന്നു. ഉദാഹരണത്തിന്, ഒരു ഗ്ലോബൽ ഓതൻ്റിക്കേഷൻ കോൺടെക്സ്റ്റിന് ഉപയോക്താവിൻ്റെ ലോഗിൻ, ലോഗൗട്ട്, പ്രൊഫൈൽ ഡാറ്റ എന്നിവ കൈകാര്യം ചെയ്യാൻ കഴിയും, ഇത് പ്രോപ് ഡ്രില്ലിംഗ് ഇല്ലാതെ ആപ്ലിക്കേഷനിലുടനീളം ലഭ്യമാക്കുന്നു.
ഭാഷ/ലോക്കേൽ ക്രമീകരണങ്ങൾ: ഇൻ്റർനാഷണലൈസേഷനും (i18n) ലോക്കലൈസേഷനും (l10n) വേണ്ടി ആപ്ലിക്കേഷനിലുടനീളം നിലവിലെ ഭാഷ അല്ലെങ്കിൽ ലോക്കേൽ ക്രമീകരണങ്ങൾ പങ്കിടുന്നു. ഇത് ഉപയോക്താവ് തിരഞ്ഞെടുത്ത ഭാഷയിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ കമ്പോണൻ്റുകളെ അനുവദിക്കുന്നു.
ഗ്ലോബൽ കോൺഫിഗറേഷൻ: API എൻഡ്‌പോയിൻ്റുകൾ അല്ലെങ്കിൽ ഫീച്ചർ ഫ്ലാഗുകൾ പോലുള്ള ഗ്ലോബൽ കോൺഫിഗറേഷൻ ക്രമീകരണങ്ങൾ പങ്കിടുന്നു. കോൺഫിഗറേഷൻ ക്രമീകരണങ്ങളെ അടിസ്ഥാനമാക്കി ആപ്ലിക്കേഷൻ്റെ സ്വഭാവം ചലനാത്മകമായി ക്രമീകരിക്കാൻ ഇത് ഉപയോഗിക്കാം.
ഷോപ്പിംഗ് കാർട്ട്: ഒരു ഷോപ്പിംഗ് കാർട്ടിൻ്റെ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുകയും ഒരു ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷനിലുടനീളം കാർട്ടിലെ ഇനങ്ങളിലേക്കും പ്രവർത്തനങ്ങളിലേക്കും കമ്പോണൻ്റുകൾക്ക് ആക്‌സസ് നൽകുകയും ചെയ്യുന്നു.

ഉദാഹരണം: ഇൻ്റർനാഷണലൈസേഷൻ (i18n)

ഇൻ്റർനാഷണലൈസേഷനായി Context API ഉപയോഗിക്കുന്നതിൻ്റെ ഒരു ലളിതമായ ഉദാഹരണം നോക്കാം:


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

const LanguageContext = createContext({
  locale: 'en',
  messages: {},
});

const translations = {
  en: {
    greeting: 'Hello',
    description: 'Welcome to our website!',
  },
  fr: {
    greeting: 'Bonjour',
    description: 'Bienvenue sur notre site web !',
  },
  es: {
    greeting: 'Hola',
    description: '¡Bienvenido a nuestro sitio web!',
  },
};

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const setLanguage = (newLocale) => {
    setLocale(newLocale);
  };

  const messages = useMemo(() => translations[locale] || translations['en'], [locale]);

  const contextValue = useMemo(() => ({
    locale,
    messages,
    setLanguage,
  }), [locale, messages]);

  return (
    
      {children}
    
  );
}

function Greeting() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.greeting}
  );
}

function Description() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.description}
  );
}

function LanguageSwitcher() {
  const { setLanguage } = useContext(LanguageContext);

  return (
    
      
      
      
    
  );
}

function App() {
  return (
    
      
      
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ:

LanguageContext നിലവിലെ ലോക്കേലും സന്ദേശങ്ങളും നൽകുന്നു.
LanguageProvider ലോക്കേൽ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുകയും കോൺടെക്സ്റ്റ് വാല്യൂ നൽകുകയും ചെയ്യുന്നു.
Greeting, Description എന്നീ കമ്പോണൻ്റുകൾ വിവർത്തനം ചെയ്ത വാചകം പ്രദർശിപ്പിക്കാൻ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്നു.
LanguageSwitcher കമ്പോണൻ്റ് ഉപയോക്താക്കൾക്ക് ഭാഷ മാറ്റാൻ അവസരം നൽകുന്നു.

useContext-നുള്ള ബദലുകൾ

useContext ഒരു ശക്തമായ ടൂൾ ആണെങ്കിലും, എല്ലാ സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സാഹചര്യങ്ങൾക്കും ഇത് എല്ലായ്പ്പോഴും മികച്ച പരിഹാരമാകണമെന്നില്ല. പരിഗണിക്കേണ്ട ചില ബദലുകൾ ഇതാ:

Redux: ജാവാസ്ക്രിപ്റ്റ് ആപ്പുകൾക്കായുള്ള ഒരു പ്രവചനാത്മക സ്റ്റേറ്റ് കണ്ടെയ്നർ. സങ്കീർണ്ണമായ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു ജനപ്രിയ മാർഗ്ഗമാണ് Redux, പ്രത്യേകിച്ച് വലിയ ആപ്ലിക്കേഷനുകളിൽ.
MobX: ലളിതവും സ്കേലബിളുമായ ഒരു സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സൊല്യൂഷൻ. സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ MobX ഒബ്സെർവബിൾ ഡാറ്റയും ഓട്ടോമാറ്റിക് റിയാക്റ്റിവിറ്റിയും ഉപയോഗിക്കുന്നു.
Recoil: സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ ആറ്റംസും സെലക്ടറുകളും ഉപയോഗിക്കുന്ന React-നുള്ള ഒരു സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറി. Redux അല്ലെങ്കിൽ MobX-നേക്കാൾ കൂടുതൽ സൂക്ഷ്മവും കാര്യക്ഷമവുമായാണ് Recoil രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.
Zustand: ലളിതമായ ഫ്ലക്സ് തത്വങ്ങൾ ഉപയോഗിക്കുന്ന ചെറുതും വേഗതയേറിയതും സ്കേലബിളുമായ ഒരു സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സൊല്യൂഷൻ.
Jotai: ഒരു ആറ്റോമിക് മോഡലുള്ള React-നായുള്ള പ്രാകൃതവും വഴക്കമുള്ളതുമായ സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്.
പ്രോപ് ഡ്രില്ലിംഗ് (Prop Drilling): കമ്പോണൻ്റ് ട്രീ ആഴം കുറഞ്ഞ ലളിതമായ സന്ദർഭങ്ങളിൽ, പ്രോപ് ഡ്രില്ലിംഗ് ഒരു നല്ല ഓപ്ഷനായിരിക്കാം. കമ്പോണൻ്റ് ട്രീയുടെ ഒന്നിലധികം തലങ്ങളിലൂടെ പ്രോപ്സ് കൈമാറുന്നത് ഇതിൽ ഉൾപ്പെടുന്നു.

സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സൊല്യൂഷൻ്റെ തിരഞ്ഞെടുപ്പ് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രത്യേക ആവശ്യങ്ങളെ ആശ്രയിച്ചിരിക്കുന്നു. തീരുമാനം എടുക്കുമ്പോൾ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ സങ്കീർണ്ണത, നിങ്ങളുടെ ടീമിൻ്റെ വലുപ്പം, പ്രകടന ആവശ്യകതകൾ എന്നിവ പരിഗണിക്കുക.

ഉപസംഹാരം

React-ൻ്റെ useContext ഹുക്ക് കമ്പോണൻ്റുകൾക്കിടയിൽ ഡാറ്റ പങ്കിടാൻ സൗകര്യപ്രദവും കാര്യക്ഷമവുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. പ്രകടനത്തിലെ സാധ്യമായ പിഴവുകൾ മനസ്സിലാക്കുകയും ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, സ്കേലബിളും മികച്ച പ്രകടനവുമുള്ള React ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് useContext-ൻ്റെ ശക്തി പ്രയോജനപ്പെടുത്താം. ഉചിതമായ സമയങ്ങളിൽ കോൺടെക്സ്റ്റുകൾ വിഭജിക്കാനും, React.memo ഉപയോഗിച്ച് കമ്പോണൻ്റുകൾ മെമ്മോയിസ് ചെയ്യാനും, കോൺടെക്സ്റ്റ് വാല്യൂകൾക്കായി useMemo, useCallback എന്നിവ ഉപയോഗിക്കാനും, സെലക്ടറുകൾ നടപ്പിലാക്കാനും, മാറ്റാനാവാത്ത ഡാറ്റാ ഘടനകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കാനും ഓർക്കുക. ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറയ്ക്കാനും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും സഹായിക്കും.

കോൺടെക്സ്റ്റ് ഉപയോഗവുമായി ബന്ധപ്പെട്ട തടസ്സങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രകടനം എപ്പോഴും പ്രൊഫൈൽ ചെയ്യുക. ഈ മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ useContext-ൻ്റെ ഉപയോഗം സുഗമവും കാര്യക്ഷമവുമായ ഉപയോക്തൃ അനുഭവത്തിന് സംഭാവന നൽകുന്നുവെന്ന് ഉറപ്പാക്കാൻ കഴിയും.