useContext: सार, कॉन्टेक्स्ट एक्सेस हुक और React में प्रोवाइडर

React में useContext क्या है

useContext एक हुक है जो React 16.8 में अन्य हुकों के साथ जोड़ा गया था जो React कॉन्टेक्स्ट से मान पढ़ने की अनुमति देता है। कॉन्टेक्स्ट React में निर्मित एक तंत्र है जिसे प्रत्येक स्तर पर मैन्युअल रूप से props पास करने की आवश्यकता के बिना कंपोनेंट ट्री के माध्यम से डेटा पास करने के लिए डिज़ाइन किया गया है। useContext पुराने Context API से Consumer कंपोनेंट को बदलता है और कोड को अधिक संक्षिप्त और पढ़ने योग्य बनाता है।

कॉन्टेक्स्ट के विशिष्ट उपयोग के मामलों में थीम (हल्का/गहरा), लोकेल और अनुवाद (i18n), उपयोगकर्ता प्रमाणीकरण, एप्लिकेशन सेटिंग्स और कोई भी अन्य वैश्विक डेटा शामिल है जिसकी विभिन्न नेस्टिंग स्तरों पर कई कंपोनेंट्स को आवश्यकता होती है। React टीम उस डेटा के लिए कॉन्टेक्स्ट का उपयोग करने की सिफारिश करती है जो कंपोनेंट्स के उप-ट्री के लिए वैश्विक है, लेकिन पूरे एप्लिकेशन के लिए नहीं।

React Team — कॉन्टेक्स्ट दस्तावेज़ीकरण (2025) के अनुसार, कॉन्टेक्स्ट का गलत उपयोग React एप्लिकेशन में प्रदर्शन समस्याओं के मुख्य कारणों में से एक है। Provider में प्रत्येक मान परिवर्तन सभी उपभोक्ताओं के पुनः रेंडर का कारण बनता है, भले ही डेटा का कौन सा भाग बदला हो। useMemo और कॉन्टेक्स्ट विभाजन के माध्यम से अनुकूलन इस समस्या को हल करता है।

import { createContext, useContext } from 'react';

// डिफ़ॉल्ट मान के साथ कॉन्टेक्स्ट बनाएँ
const ThemeContext = createContext('हल्का');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

React में कॉन्टेक्स्ट कैसे काम करता है

React में कॉन्टेक्स्ट तंत्र Provider-Consumer पैटर्न के माध्यम से कार्यान्वित किया जाता है। createContext दो संस्थाओं वाला एक ऑब्जेक्ट लौटाता है: Provider — एक कंपोनेंट जो मान प्रेषित करता है, और स्वयं कॉन्टेक्स्ट ऑब्जेक्ट, जिसका उपयोग useContext में किया जाता है। Provider कंपोनेंट ट्री में माउंट होता है और नेस्टिंग गहराई की परवाह किए बिना सभी चाइल्ड एलिमेंट्स को मान प्रेषित करता है।

जब React को useContext कॉल मिलता है, तो यह उस कॉन्टेक्स्ट के लिए निकटतम Provider खोजने हेतु फ़ाइबर ट्री को ट्रैवर्स करता है। यदि Provider मिल जाता है, तो उसका मान लौटाया जाता है। यदि कोई Provider नहीं मिलता है, तो createContext को पास किया गया डिफ़ॉल्ट मान लौटाया जाता है। यह खोज प्रत्येक रेंडर पर होती है, लेकिन फ़ाइबर नोड मेमोइज़ेशन के कारण यह बहुत तेज़ है और प्रदर्शन को प्रभावित नहीं करती है।

React — कॉन्टेक्स्ट आंतरिक (2024) के अनुसार, useContext का आंतरिक कार्यान्वयन useState के समान हुकों की एक लिंक्ड लिस्ट का उपयोग करता है। प्रत्येक हुक एक फ़ाइबर नोड का संदर्भ संग्रहीत करता है, जिससे React को जल्दी से यह निर्धारित करने की अनुमति मिलती है कि कौन सा Provider उस कॉन्टेक्स्ट से मेल खाता है। जब कोई Provider अपना मान अपडेट करता है, तो React उस कॉन्टेक्स्ट का उपयोग करने वाले सभी फ़ाइबर नोड्स को पुनः रेंडर के लिए चिह्नित करता है।

Provider और नेस्टेड कॉन्टेक्स्ट

Provider कंपोनेंट्स को एक दूसरे के अंदर नेस्ट किया जा सकता है, जिससे कॉन्टेक्स्ट का पदानुक्रम बनता है। प्रत्येक चाइल्ड Provider अपने स्वयं के उप-ट्री के लिए मूल के मान को ओवरराइड करता है। यह तब उपयोगी होता है जब एक स्क्रीन को हल्की थीम की आवश्यकता होती है जबकि नेस्टेड मोडल विंडो को गहरी थीम की आवश्यकता होती है। useContext हमेशा ट्री में सबसे निकटतम Provider का मान लौटाता है।

const UserContext = createContext(null);
const ThemeContext = createContext('हल्का');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

createContext के साथ Provider बनाना

createContext(defaultValue) फ़ंक्शन एक कॉन्टेक्स्ट ऑब्जेक्ट बनाता है। पैरामीटर defaultValue का उपयोग तब किया जाता है जब कोई कंपोनेंट useContext कॉल करता है लेकिन ट्री में ऊपर कोई संगत Provider नहीं होता है। defaultValue के बिना, useContext undefined लौटाएगा, जो अप्रत्याशित त्रुटियों का कारण बन सकता है। हमेशा एक सार्थक डिफ़ॉल्ट मान या null पास करने की अनुशंसा की जाती है।

कस्टम Provider बनाना कॉन्टेक्स्ट लॉजिक को एनकैप्सुलेट करने का एक सामान्य पैटर्न है। ऐसे Provider के अंदर, स्थिति (useState या useReducer के माध्यम से) संग्रहीत की जाती है और Provider के value प्रोप के माध्यम से प्रदान की जाती है। यह उपभोक्ता कंपोनेंट्स से कार्यान्वयन विवरण छिपाता है और कॉन्टेक्स्ट प्रबंधन लॉजिक को एक स्थान पर केंद्रीकृत करता है।

// स्थिति प्रबंधन के साथ कस्टम Provider
const AuthContext = createContext(null);

function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = useCallback(async (email, pass) => {
        const u = await loginApi(email, pass);
        setUser(u);
    }, []);

    return (
        <AuthContext.Provider value={{ user, login }}>
            {children}
        </AuthContext.Provider>
    );
}

चाइल्ड कंपोनेंट्स में useContext का उपयोग

फंक्शनल कंपोनेंट्स में, useContext कॉन्टेक्स्ट तक पहुँचने का एकमात्र तरीका है। यह पुराने Context API से Consumer कंपोनेंट को बदलता है, जिसके लिए render-prop पैटर्न की आवश्यकता थी: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>। useContext कोड को अधिक रैखिक और पढ़ने योग्य बनाता है, विशेष रूप से एक कंपोनेंट में कई कॉन्टेक्स्ट के साथ काम करते समय।

एक कंपोनेंट में कई कॉन्टेक्स्ट का उपयोग करते समय, बस प्रत्येक कॉन्टेक्स्ट के लिए कई बार useContext कॉल करें। प्रत्येक कॉल संबंधित Provider का मान लौटाता है। कॉल का क्रम मायने नहीं रखता, क्योंकि प्रत्येक कॉन्टेक्स्ट एक स्वतंत्र इकाई है। React समान फ़ाइबर संदर्भ प्रणाली के माध्यम से कई कॉलों को ऑप्टिमाइज़ करता है।

function Dashboard() {
    const { user } = useContext(AuthContext);
    const theme = useContext(ThemeContext);
    const { locale } = useContext(I18nContext);

    return (
        <div className={`dashboard-${theme}`}>
            <h1>{locale.greeting}, {user.name}</h1>
        </div>
    );
}

useContext बनाम Redux: कब क्या चुनें

useContext और Redux के बीच चुनाव स्थिति प्रबंधन के पैमाने और जटिलता पर निर्भर करता है। useContext + useReducer छोटे और मध्यम एप्लिकेशन के लिए Redux का एक हल्का प्रतिस्थापन है। इसे बाहरी लाइब्रेरी स्थापित करने की आवश्यकता नहीं है, सीखना आसान है, और अधिकांश कार्यों के लिए पर्याप्त है। Redux तब उचित है जब middleware, डेवटूल्स और अपरिवर्तनीय अपडेट के साथ सख्त आर्किटेक्चर की आवश्यकता होती है।

useContext पर Redux का मुख्य लाभ पुनः रेंडर अनुकूलन है। डिफ़ॉल्ट रूप से, जब Provider में मान बदलता है, तो सभी कॉन्टेक्स्ट उपभोक्ता पुनः रेंडर होते हैं। Redux useSelector और shallowEqual के साथ कंपोनेंट्स को केवल स्थिति के विशिष्ट भागों की सदस्यता लेने की अनुमति देता है, जो बड़े एप्लिकेशन में पुनः रेंडर की संख्या को काफी कम करता है। कॉन्टेक्स्ट को कई छोटे कॉन्टेक्स्ट में विभाजित करके भी अनुकूलित किया जा सकता है।

Redux अनुरक्षक — Redux का उपयोग कब करें (2024) के अनुसार, 70% React एप्लिकेशन को Redux की आवश्यकता नहीं है। यदि आपके पास 50 से कम कंपोनेंट हैं और स्थिति में कैशिंग, debounce और साइड इफेक्ट्स के साथ जटिल लॉजिक शामिल नहीं है — तो useContext + useReducer पर्याप्त से अधिक है। Redux बॉयलरप्लेट जोड़ता है और इसका सचेत रूप से उपयोग किया जाना चाहिए।

useContext के साथ सामान्य गलतियाँ

सबसे आम गलती प्रत्येक Provider रेंडर पर value ऑब्जेक्ट को पुनः बनाना है। यदि आप Provider को value={{ user, login }} पास करते हैं, तो प्रत्येक Provider रेंडर पर एक नया ऑब्जेक्ट बनता है, जिससे सभी उपभोक्ता पुनः रेंडर होते हैं भले ही डेटा नहीं बदला हो। समाधान useMemo के साथ मान को मेमोइज़ करना या बार-बार और कभी-कभार बदलने वाले डेटा के लिए अलग कॉन्टेक्स्ट का उपयोग करना है।

• अनावश्यक पुनः रेंडर — प्रत्येक Provider रेंडर पर एक नया value ऑब्जेक्ट। मान को मेमोइज़ करने के लिए useMemo का उपयोग करें।
• बहुत बड़ा कॉन्टेक्स्ट — दर्जनों फ़ील्ड वाला एक Provider सभी चाइल्ड कंपोनेंट्स को किसी भी फ़ील्ड के बदलने पर पुनः रेंडर करता है। अर्थ के अनुसार कई कॉन्टेक्स्ट में विभाजित करें।
• defaultValue की कमी — यदि कोई Provider नहीं मिलता है, तो useContext defaultValue लौटाएगा, और यदि वह undefined है, तो प्रत्येक कॉल TypeError फेंकेगी।
• एक ही प्रकार के नेस्टेड Provider — गहरे स्तरों पर कॉन्टेक्स्ट को ओवरराइड करना भ्रमित करने वाला हो सकता है और अप्रत्याशित मानों की ओर ले जा सकता है।

// ❌ हर render पर नया ऑब्जेक्ट — सभी उपभोक्ता पुनः रेंडर होते हैं
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ मेमोइज़्ड मान — केवल जब user या login बदलता है तब पुनः रेंडर
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

“बड़े कॉन्टेक्स्ट” समस्या को हल करने के लिए, वैश्विक स्थिति को तार्किक समूहों में विभाजित करें: AuthContext, ThemeContext, I18nContext। प्रत्येक कॉन्टेक्स्ट अपने क्षेत्र के लिए जिम्मेदार है और स्वतंत्र रूप से अपडेट होता है। यह useMemo के माध्यम से एक विशाल कॉन्टेक्स्ट को अनुकूलित करने की कोशिश करने से सरल है, और अधिक पूर्वानुमानित पुनः रेंडर व्यवहार देता है।