React Native Academy · पाठ

useContext से कॉन्टेक्स्ट का उपयोग

useContext हुक से किसी भी नेस्टेड कॉम्पोनेंट के भीतर कॉन्टेक्स्ट मान पढ़ें और मध्यवर्ती कॉम्पोनेंट के माध्यम से props भेजने की आवश्यकता से बचें।

पाठ 2, कुल 4 में से13 चरण

useContext से कॉन्टेक्स्ट का उपयोग, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

useContext से Context पढ़ना

useContext(ContextObject) हुक किसी भी फ़ंक्शन घटक को Context की सदस्यता लेने और उसका वर्तमान मान पढ़ने देता है। यह पुराने Consumer रेंडर प्रॉप पैटर्न की जगह एक सरल हुक कॉल देता है। Context का मान बदलने पर घटक अपने-आप दोबारा रेंडर होता है।

import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

function Header() {
  const { theme } = useContext(ThemeContext);

  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#1a1a2e' : '#fff' }}>
      <Text>My App</Text>
    </View>
  );
}

प्रॉप ड्रिलिंग की आवश्यकता नहीं

useContext का मुख्य लाभ यह है कि Context का उपयोग करने वाले घटक को अपने पैरेंट से props प्राप्त करने की आवश्यकता नहीं होती। पिछले उदाहरण का Header घटक ट्री में कहीं भी हो सकता है—तीन स्तर नीचे, किसी मोडल के अंदर या पूरी तरह अलग शाखा में—फिर भी वह Context से सीधे वही थीम मान पढ़ सकता है।

// Without context: theme prop drills through App→Screen→Section→Card→Header
// With context: Header reads theme directly from context
function DeepComponent() {
  const { user } = useContext(AuthContext); // no props needed
  return <Text>Welcome, {user.name}</Text>;
}

Context से क्रियाएँ कॉल करना

Context केवल डेटा ही नहीं, बल्कि डेटा अपडेट करने वाले फ़ंक्शन भी उपलब्ध करा सकता है। इन फ़ंक्शन को उपयोग करने वाले घटक से सीधे कॉल करें, बिना यह जाने कि स्थिति कहाँ रखी गई है। Provider स्थिति अपडेट संभालता है और मान पर निर्भर सभी उपभोक्ता अपने-आप दोबारा रेंडर होते हैं।

function LogoutButton() {
  const { logout } = useContext(AuthContext);

  return (
    <Button title='Sign Out' onPress={logout} />
  );
}

एक घटक में कई Context का उपयोग

कोई घटक अलग-अलग Context ऑब्जेक्ट के साथ useContext को कई बार कॉल करके कई Context का उपयोग कर सकता है। प्रत्येक कॉल स्वतंत्र होती है—ThemeContext में बदलाव केवल ThemeContext के उपभोक्ताओं को दोबारा रेंडर कराता है, AuthContext के उपभोक्ताओं को नहीं (जब तक वे ThemeContext पर भी निर्भर न हों)।

function ProfileScreen() {
  const { user } = useContext(AuthContext);
  const { theme } = useContext(ThemeContext);

  return (
    <View style={styles[theme]}>
      <Text style={styles[theme + 'Text']}>
        {user.name}
      </Text>
    </View>
  );
}

Context का मान नवीनतम रेंडर से आता है

useContext हमेशा सबसे निकट वाले मेल खाते Provider द्वारा उपलब्ध कराया गया नवीनतम मान देता है। जब Provider नए मान के साथ दोबारा रेंडर होता है, तो React तुरंत सभी उपभोक्ताओं तक अपडेट पहुँचाता है, भले ही Provider और उपभोक्ता के बीच के मध्यवर्ती घटक दोबारा रेंडर न हुए हों। संभावित रूप से रेंडर न होने वाले मध्यवर्ती घटकों के माध्यम से props भेजने की तुलना में यह एक प्रमुख लाभ है।

एक useAuth कस्टम हुक बनाना

हर घटक में useContext(AuthContext) को इम्पोर्ट करके कॉल करने के बजाय, उसे एक कस्टम useAuth हुक में लपेटें। इससे Context ऑब्जेक्ट के इम्पोर्ट का विवरण छिप जाता है, कॉल करने वाला कोड अधिक पठनीय बनता है और आपको error जाँच या व्युत्पन्न मान एक ही स्थान पर जोड़ने की सुविधा मिलती है।

// context/AuthContext.js
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

// In any component
function NavBar() {
  const { user, logout } = useAuth(); // clean and simple
  return <Text>{user.email}</Text>;
}

Context से रूट सुरक्षित करना

एक सामान्य पैटर्न यह है कि Context से प्रमाणीकरण स्थिति पढ़कर सशर्त रूप से या तो प्रमाणित ऐप स्टैक या लॉग-इन स्क्रीन रेंडर की जाए। रूट नेविगेटर AuthContext से user पढ़ता है—जब user null होता है, तो वह प्रमाणीकरण स्क्रीन रेंडर करता है; और जब उसमें मान होता है, तो मुख्य ऐप स्क्रीन रेंडर करता है।

function RootNavigator() {
  const { user } = useAuth();

  return (
    <NavigationContainer>
      {user ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

Context के आधार पर सशर्त रेंडरिंग

घटक रेंडर करने का निर्णय लेने के लिए Context के मानों का उपयोग कर सकते हैं। कोई प्रीमियम सुविधा घटक Context से उपयोगकर्ता के सब्सक्रिप्शन स्तर की जाँच करता है और या तो पूरी सुविधा या भुगतान दीवार वाला CTA रेंडर करता है। यह तर्क उपयोग करने वाले घटक में रहता है, जिससे Provider सामान्य और पुनः उपयोग योग्य बना रहता है।

function PremiumFeature({ children }) {
  const { user } = useAuth();
  const isPro = user?.subscription === 'pro';

  if (!isPro) {
    return <UpgradePrompt />;
  }

  return children;
}

सूची आइटम में Context

Context FlatList के renderItem घटकों के अंदर भी काम करता है। प्रत्येक सूची आइटम props के बिना Context पढ़ सकता है। ध्यान रखें कि Context का मान बदलने पर हर दिखाई देने वाला सूची आइटम दोबारा रेंडर होगा—प्रभाव कम करने के लिए React.memo का उपयोग करें और सुनिश्चित करें कि Context का मान स्थिर (memoized) हो।

const CartItem = React.memo(({ item }) => {
  const { addToCart } = useContext(CartContext);

  return (
    <View style={styles.row}>
      <Text>{item.name}</Text>
      <Button title='Add' onPress={() => addToCart(item)} />
    </View>
  );
});

Context बनाम Props: किसका उपयोग कब करें

उस डेटा के लिए props का उपयोग करें जिसका स्वाभाविक स्वामित्व पैरेंट के पास हो और जो सीधे बच्चे के प्रदर्शन से संबंधित हो। वैश्विक या कई हिस्सों से संबंधित सरोकारों के लिए Context का उपयोग करें: प्रमाणीकरण, थीम, भाषा और कार्ट की स्थिति। स्थानीय डेटा के लिए Context का अत्यधिक उपयोग करने से घटकों को समझना और अलग से पुनः उपयोग करना कठिन हो जाता है, क्योंकि उनकी निर्भरताएँ स्पष्ट होने के बजाय अंतर्निहित होती हैं।

useContext का लौटाया गया मान

useContext ठीक वही मान लौटाता है जो सबसे निकट वाले Provider के value prop को दिया गया था। यदि घटक के ऊपर कोई Provider न मिले, तो यह createContext() को दिया गया डिफ़ॉल्ट मान लौटाता है। अधिक साफ़ और पठनीय कोड के लिए लौटाई गई वस्तु को कॉल किए जाने वाले स्थान पर सीधे अलग-अलग मानों में बाँट लें।

// Full value object
const themeContext = useContext(ThemeContext);
themeContext.theme; // 'light' or 'dark'

// Destructured (preferred)
const { theme, toggleTheme } = useContext(ThemeContext);

// From custom hook
const { user, login, logout } = useAuth();

त्वरित जाँच

इस पाठ से useContext के माध्यम से Context का उपयोग करने की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: useContext(ContextObject) प्रॉप ड्रिलिंग के बिना सबसे निकट वाले Provider का मान पढ़ता है, कोई घटक useContext को कई बार कॉल करके कई Context का उपयोग कर सकता है, और useContext को कस्टम हुक में लपेटने से error जाँच वाली साफ़ API मिलती है। आगे हम डार्क मोड टॉगल के साथ एक थीम Context बनाएँगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “useContext से कॉन्टेक्स्ट का उपयोग” पाठ निःशुल्क है?

हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “useContext से कॉन्टेक्स्ट का उपयोग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“useContext से कॉन्टेक्स्ट का उपयोग” में मैं क्या सीखूँगा?

useContext हुक से किसी भी नेस्टेड कॉम्पोनेंट के भीतर कॉन्टेक्स्ट मान पढ़ें और मध्यवर्ती कॉम्पोनेंट के माध्यम से props भेजने की आवश्यकता से बचें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“useContext से कॉन्टेक्स्ट का उपयोग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

कॉन्टेक्स्ट बनाना और उपलब्ध कराना
useContext से कॉन्टेक्स्ट का उपयोग
डार्क मोड टॉगल वाला Theme Context
कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना

← React Native Academy पर वापस जाएँ