Global State के लिए useContext
Context बनाएँ, उसके Provider से subtree को wrap करें और prop drilling के बिना theme या auth state साझा करने के लिए useContext से value लें।
Global State के लिए useContext, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
प्रॉप ड्रिलिंग की समस्या
प्रॉप ड्रिलिंग का अर्थ है किसी गहराई में मौजूद चाइल्ड तक पहुँचाने के लिए डेटा को कई ऐसे मध्यवर्ती घटकों से गुज़ारना जो उसका उपयोग नहीं करते। Context किसी मान को स्पष्ट रूप से पास किए बिना ट्री के किसी भी घटक के लिए उपलब्ध कराकर इस समस्या का समाधान करता है।
कॉन्टेक्स्ट बनाना
createContext(defaultValue) एक Context ऑब्जेक्ट बनाता है। डिफ़ॉल्ट मान तब उपयोग किया जाता है जब कोई घटक अपने ऊपर मेल खाता हुआ Provider न होने पर कॉन्टेक्स्ट पढ़ता है।
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});कॉन्टेक्स्ट उपलब्ध कराना
ट्री के जिस हिस्से को कॉन्टेक्स्ट की आवश्यकता हो, उसे Provider से घेरें। अंदर मौजूद सभी घटक कॉन्टेक्स्ट का मान पढ़ सकते हैं।
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>useContext से उपयोग करना
प्रदाता के भीतर मौजूद कोई भी घटक useContext(ThemeContext) से संदर्भ का मान प्राप्त कर सकता है। किसी भी चीज़ को प्रॉप के रूप में भेजने की आवश्यकता नहीं है।
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}useContext को समाहित करने वाला कस्टम हुक
एक कस्टम हुक निर्यात करें जो आंतरिक रूप से useContext को कॉल करता हो। यह संदर्भ को सीधे उपलब्ध कराने से अधिक साफ़ तरीका है और आपको सत्यापन जोड़ने की सुविधा देता है।
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();संदर्भ का दोबारा रेंडर होना
जब प्रदाता का मान बदलता है, तो सभी उपभोक्ता दोबारा रेंडर होते हैं। यदि मान एक ऑब्जेक्ट है, तो प्रत्येक रेंडर में नया ऑब्जेक्ट संदर्भ बनने से सभी उपभोक्ता दोबारा रेंडर होंगे। इसे रोकने के लिए मान को useMemo से मेमोइज़ करें।
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>संदर्भ का उपयोग कब करें
इनके लिए उपयोगी: थीम, लोकेल, प्रमाणीकृत उपयोगकर्ता, सुविधा फ़्लैग और सूचना प्रणाली। इनके लिए उपयुक्त नहीं: बहुत अधिक बार होने वाले अपडेट (हर कीस्ट्रोक), बड़ी जटिल स्थिति (इसके बजाय किसी स्टोर का उपयोग करें)।
एकाधिक संदर्भ
आपके पास कई स्वतंत्र संदर्भ हो सकते हैं। उन्हें केंद्रित रखें — प्रमाणीकरण के लिए AuthContext और थीम के लिए ThemeContext। ऐसा एकल सर्वव्यापी संदर्भ बनाने से बचें जिसमें सब कुछ रखा हो।
संदर्भ बनाम Redux
संदर्भ अंतर्निहित है और कम बार बदलने वाले वैश्विक डेटा के लिए पर्याप्त है। Redux/Zustand/Pinia कई अपडेट वाली जटिल स्थिति, टाइम-ट्रैवल डीबगिंग या मिडलवेयर की आवश्यकताओं के लिए बेहतर हैं।
प्रमाणीकरण संदर्भ पैटर्न
एक सामान्य पैटर्न है: AuthContext में वर्तमान उपयोगकर्ता और प्रमाणीकरण विधियाँ रखी जाती हैं। इसका उपयोग करने वाले घटक, प्रॉप-ड्रिलिंग के बिना उपयोगकर्ता प्राप्त कर लेते हैं।
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};संदर्भ और TypeScript
संदर्भ का प्रकार एक इंटरफ़ेस से निर्धारित करें। प्रारंभिक मान के रूप में null का उपयोग करें और यदि वह null हो, तो कस्टम हुक में त्रुटि उत्पन्न करें। इससे 'प्रदाता के बाहर उपयोग की गई स्थिति' चुपचाप बनी नहीं रह सकती।
प्रदर्शन: memo + संदर्भ
React.memo से लिपटे घटक तब तक दोबारा रेंडर नहीं होते, जब तक उनके प्रॉप्स न बदलें। यदि किसी संदर्भ-उपभोक्ता का परिणाम संदर्भ के केवल एक हिस्से पर निर्भर करता है, तो अनावश्यक दोबारा रेंडर होने से बचने के लिए संदर्भ को विभाजित करें या चयनकर्ता पैटर्न का उपयोग करें।
त्वरित जाँच
जब useContext(MyContext) को ऐसे घटक के भीतर कॉल किया जाता है जिसके ऊपर कोई प्रदाता नहीं है, तो यह क्या लौटाता है?
पुनरावृत्ति: useContext
createContext एक डिफ़ॉल्ट मान वाला संदर्भ बनाता है। मान उपलब्ध कराने के लिए ट्री को प्रदाता से लपेटें। useContext भीतर कहीं भी मान पढ़ता है। सत्यापन के लिए कस्टम हुक useContext को समाहित करते हैं। अनावश्यक दोबारा रेंडर होने से बचाने के लिए प्रदाता के मान को मेमोइज़ करें। थीम और प्रमाणीकरण जैसे कम बार बदलने वाले वैश्विक डेटा के लिए इसका उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Global State के लिए useContext” पाठ निःशुल्क है?
हाँ—“Global State के लिए useContext” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Global State के लिए useContext” में मैं क्या सीखूँगा?
Context बनाएँ, उसके Provider से subtree को wrap करें और prop drilling के बिना theme या auth state साझा करने के लिए useContext से value लें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“Global State के लिए useContext” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Global State के लिए useContext
- Complex State के लिए useReducer
- Performance के लिए useMemo और useCallback
- Custom Hooks: Reusable Logic निकालना