createContext

const SomeContext = createContext(defaultValue)

• குறிப்பு
  • createContext(defaultValue)
  • SomeContext Provider
  • SomeContext.Consumer
• பயன்பாடு
  • Context உருவாக்குதல்
  • File-இலிருந்து context import மற்றும் export செய்தல்
• சிக்கல் தீர்வு
  • Context value-ஐ மாற்ற வழி கிடைக்கவில்லை

குறிப்பு

createContext(defaultValue)

Context உருவாக்க எந்த components-க்கும் வெளியே createContext-ஐ call செய்யுங்கள்.

import { createContext } from 'react';

const ThemeContext = createContext('light');

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

Parameters

• defaultValue: Context read செய்யும் component-க்கு மேலுள்ள tree-இல் பொருந்தும் context provider இல்லாதபோது context கொண்டிருக்க வேண்டிய value. உங்களிடம் meaningful default value இல்லையெனில், null குறிப்பிடுங்கள். Default value என்பது “last resort” fallback ஆகும். இது static; காலப்போக்கில் மாறாது.

Returns

createContext ஒரு context object-ஐ return செய்கிறது.

Context object தானாகவே எந்த information-ஐயும் hold செய்யாது. பிற components எந்த context-ஐ read அல்லது provide செய்கின்றன என்பதை அது represent செய்கிறது. பொதுவாக, மேலுள்ள components-இல் context value-ஐ குறிப்பிட SomeContext-ஐ பயன்படுத்தி, கீழுள்ள components-இல் அதை read செய்ய useContext(SomeContext)-ஐ call செய்வீர்கள். Context object-க்கு சில properties உள்ளன:

• SomeContext components-க்கு context value provide செய்ய உதவுகிறது.
• SomeContext.Consumer context value read செய்யும் மாற்று மற்றும் அரிதாக பயன்படுத்தப்படும் வழி.
• SomeContext.Provider React 19-க்கு முன் context value provide செய்யும் legacy வழி.

SomeContext Provider

உள்ளே உள்ள அனைத்து components-க்கும் இந்த context-ன் value-ஐ குறிப்பிட, உங்கள் components-ஐ context provider-க்குள் wrap செய்யுங்கள்:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext value={theme}>
      <Page />
    </ThemeContext>
  );
}

Props

• value: இந்த provider-க்குள், எவ்வளவு ஆழமாக இருந்தாலும், இந்த context-ஐ read செய்யும் அனைத்து components-க்கும் pass செய்ய வேண்டிய value. Context value எந்த type ஆகவும் இருக்கலாம். Provider-க்குள் useContext(SomeContext) call செய்யும் component, அதற்கு மேலுள்ள innermost corresponding context provider-ன் value-ஐ பெறும்.

SomeContext.Consumer

useContext வருவதற்கு முன், context read செய்ய பழைய வழி ஒன்று இருந்தது:

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

இந்த பழைய வழி இன்னும் வேலை செய்தாலும், புதியதாக எழுதப்படும் code context-ஐ useContext() மூலம் read செய்ய வேண்டும்:

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Props

• children: ஒரு function. useContext() பயன்படுத்தும் அதே algorithm மூலம் தீர்மானிக்கப்பட்ட current context value உடன், நீங்கள் pass செய்யும் function-ஐ React call செய்து, அந்த function return செய்யும் result-ஐ render செய்யும். Parent components-இலிருந்து context மாறும் போதெல்லாம் React இந்த function-ஐ மீண்டும் run செய்து UI-ஐ update செய்யும்.

பயன்பாடு

Context உருவாக்குதல்

Props-ஐ explicit-ஆக pass செய்யாமல் components information-ஐ ஆழமாக கீழே pass செய்ய context உதவுகிறது.

ஒன்று அல்லது அதற்கு மேற்பட்ட contexts உருவாக்க, எந்த components-க்கும் வெளியே createContext-ஐ call செய்யுங்கள்.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext ஒரு context object-ஐ return செய்கிறது. அதை useContext()-க்கு pass செய்வதன் மூலம் components context-ஐ read செய்யலாம்:

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Default-ஆக, அவை பெறும் values contexts உருவாக்கும்போது நீங்கள் குறிப்பிட்ட default values ஆக இருக்கும். ஆனால் இது தனியாக பயனுள்ளதாக இல்லை; ஏனெனில் default values ஒருபோதும் மாறாது.

Context பயனுள்ளது; ஏனெனில் உங்கள் components-இலிருந்து பிற dynamic values-ஐ provide செய்யலாம்:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext value={theme}>
      <AuthContext value={currentUser}>
        <Page />
      </AuthContext>
    </ThemeContext>
  );
}

இப்போது Page component மற்றும் அதன் உள்ளே எவ்வளவு ஆழமாக இருந்தாலும் உள்ள components, pass செய்யப்பட்ட context values-ஐ “பார்க்கும்”. Pass செய்யப்பட்ட context values மாறினால், context-ஐ read செய்யும் components-ஐயும் React re-render செய்யும்.

Context read மற்றும் provide செய்வது குறித்து மேலும் படித்து உதாரணங்களைப் பார்க்கவும்.

File-இலிருந்து context import மற்றும் export செய்தல்

அடிக்கடி, வெவ்வேறு files-இல் உள்ள components-க்கு அதே context access தேவைப்படும். அதனால்தான் contexts-ஐ தனி file-இல் declare செய்வது பொதுவானது. பின்னர் export statement-ஐப் பயன்படுத்தி context-ஐ பிற files-க்கு கிடைக்கச் செய்யலாம்:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

பிற files-இல் declare செய்யப்பட்ட components பின்னர் import statement-ஐப் பயன்படுத்தி இந்த context-ஐ read அல்லது provide செய்யலாம்:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext value={theme}>
      <AuthContext value={currentUser}>
        <Page />
      </AuthContext>
    </ThemeContext>
  );
}

இது components import மற்றும் export செய்வது போலவே வேலை செய்கிறது.

சிக்கல் தீர்வு

Context value-ஐ மாற்ற வழி கிடைக்கவில்லை

இப்படியான code default context value-ஐ குறிப்பிடுகிறது:

const ThemeContext = createContext('light');

இந்த value ஒருபோதும் மாறாது. மேலே பொருந்தும் provider கிடைக்கவில்லை என்றால் மட்டுமே React இந்த value-ஐ fallback ஆகப் பயன்படுத்தும்.

Context காலத்தோடு மாற வேண்டுமெனில், state சேர்த்து components-ஐ context provider-இல் wrap செய்யுங்கள்.