Context API
रिएक्ट (React) में Context API एक शक्तिशाली टूल है जो विभिन्न कंपोनेंट्स के बीच डेटा और स्टेट को साझा करने की सुविधा प्रदान करता है, बिना इसे हर लेवल पर Props के रूप में पास किए। इसे "Prop Drilling" की समस्या को हल करने के लिए डिजाइन किया गया है। यह आधुनिक वेब एप्लिकेशन और Single-Page Applications (SPAs) में बहुत महत्वपूर्ण है, जहाँ कंपोनेंट ट्री जटिल हो जाता है और ग्लोबल स्टेट जैसे उपयोगकर्ता डेटा, थीम या कॉन्फ़िगरेशन को प्रभावी ढंग से साझा करना आवश्यक होता है।
Context API का उपयोग करते हुए, हम एक केंद्रीय डेटा स्टोर बना सकते हैं जिसे सभी चाइल्ड कंपोनेंट्स उपयोग कर सकते हैं। इसे Provider/Consumer पैटर्न या useContext Hook के माध्यम से एक्सेस किया जा सकता है। इससे एप्लिकेशन की आर्किटेक्चर अधिक मॉड्यूलर और maintainable बनती है। रिएक्ट के मुख्य कॉन्सेप्ट जैसे कंपोनेंट्स, state management, data flow और lifecycle को समझना आवश्यक है।
इस ट्यूटोरियल में, आप सीखेंगे कि Context API का बेसिक से लेकर एडवांस्ड उपयोग कैसे किया जाता है। आप सीखेंगे कैसे ग्लोबल स्टेट, थीम, और उपयोगकर्ता डेटा को संभाला जा सकता है, साथ ही असिंक्रोनस डेटा हैंडलिंग और प्रदर्शन अनुकूलन (performance optimization) के लिए Context API का सही उपयोग कैसे किया जाए। यह ज्ञान आपको रियल वर्ल्ड रिएक्ट प्रोजेक्ट्स में स्केलेबल और maintainable एप्लिकेशन बनाने में मदद करेगा।
मूल उदाहरण
jsximport React, { createContext, useState, useContext } from 'react';
// Theme Context बनाएँ
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemeSwitcher = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return ( <div> <p>वर्तमान थीम: {theme}</p> <button onClick={toggleTheme}>थीम बदलें</button> </div>
);
};
const App = () => ( <ThemeProvider> <ThemeSwitcher /> </ThemeProvider>
);
export default App;इस मूल उदाहरण में, ThemeContext createContext के माध्यम से बनाया गया है। ThemeProvider कंपोनेंट useState के जरिए थीम का स्टेट मैनेज करता है और toggleTheme फंक्शन प्रदान करता है, जिससे थीम 'light' और 'dark' के बीच बदलती है। Provider ने चाइल्ड कंपोनेंट्स को Value पास की, ताकि वे सीधे Context का उपयोग कर सकें।
ThemeSwitcher में useContext Hook का उपयोग करके ThemeContext के मानों को एक्सेस किया गया। यह पारंपरिक Consumer पैटर्न की तुलना में कोड को सरल और readable बनाता है। इस पैटर्न से Prop Drilling की समस्या खत्म होती है। यह दृष्टिकोण रियल वर्ल्ड प्रोजेक्ट्स में थीम, भाषा सेटिंग्स या यूज़र स्टेट साझा करने के लिए आदर्श है।
व्यावहारिक उदाहरण
jsximport React, { createContext, useState, useContext, useEffect } from 'react';
// User Context बनाएँ
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// API से डेटा लोड करना (सिम्युलेटेड)
setTimeout(() => {
setUser({ name: 'राम शर्मा', role: 'Admin' });
setLoading(false);
}, 1500);
}, []);
const logout = () => setUser(null);
return (
<UserContext.Provider value={{ user, loading, logout }}>
{children}
</UserContext.Provider>
);
};
const UserProfile = () => {
const { user, loading, logout } = useContext(UserContext);
if (loading) return <p>डेटा लोड हो रहा है...</p>;
if (!user) return <p>कोई उपयोगकर्ता लॉगिन नहीं है</p>;
return ( <div> <h2>स्वागत है, {user.name}</h2> <p>भूमिका: {user.role}</p> <button onClick={logout}>लॉग आउट</button> </div>
);
};
const App = () => ( <UserProvider> <UserProfile /> </UserProvider>
);
export default App;यह व्यावहारिक उदाहरण Context API का उपयोग करते हुए यूज़र स्टेट को प्रबंधित करने का तरीका दिखाता है। UserProvider useEffect के माध्यम से असिंक्रोनस डेटा लोड करता है और user व loading स्टेट को संभालता है। logout फंक्शन Provider में प्रदान किया गया है ताकि किसी भी चाइल्ड कंपोनेंट से स्टेट को सुरक्षित रूप से अपडेट किया जा सके।
UserProfile useContext के माध्यम से Context का उपयोग करता है और UI को स्टेट के अनुसार अपडेट करता है। यह डिजाइन स्टेट लॉजिक को UI से अलग रखता है, जिससे टेस्टिंग और मेंटेनेंस आसान होती है। केवल वे कंपोनेंट्स जो Context का उपयोग करते हैं, ही रि-रेंडर होते हैं, जिससे प्रदर्शन में सुधार होता है।
Context API के लिए कुछ Best Practices में शामिल हैं: Provider को उचित लेवल पर रखना, Context को जरूरत के अनुसार विभाजित करना ताकि अनावश्यक रि-रेंडर्स न हों, और स्टेट अपडेट्स को setState या useReducer के माध्यम से ही करना।
सामान्य गलतियाँ: स्थानीय स्टेट को Context में रखना, Context मानों को सीधे mutate करना, असिंक्रोनस अपडेट्स को गलत तरीके से हैंडल करना। React DevTools का उपयोग Context अपडेट्स और रि-रेंडर्स को debug करने के लिए किया जा सकता है। Performance optimization में Context को विभाजित करना, React.memo या useMemo का उपयोग और Context अपडेट्स को minimize करना शामिल है। सुरक्षा: संवेदनशील डेटा जैसे tokens को Context में अनसेफ रूप से स्टोर न करें।
📊 संदर्भ तालिका
| रिएक्ट (React) Element/Concept | Description | Usage Example |
|---|---|---|
| createContext | Context ऑब्जेक्ट बनाता है जो डेटा साझा करने में मदद करता है | const ThemeContext = createContext(); |
| Provider | चाइल्ड कंपोनेंट्स को Context मान प्रदान करता है | <ThemeContext.Provider value={{ theme }}></ThemeContext.Provider> |
| useContext | Hook जो Context मानों का उपभोग करता है | const theme = useContext(ThemeContext); |
| useState | Provider का स्थानीय स्टेट प्रबंधित करता है | const [theme, setTheme] = useState('light'); |
| useEffect | Lifecycle इवेंट और साइड इफेक्ट्स हैंडल करता है | useEffect(() => { fetchData(); }, []); |
Context API ग्लोबल स्टेट साझा करने और Prop Drilling को रोकने के लिए एक कुशल तरीका है। मुख्य बातें: Provider बनाना, useContext का उपयोग, असिंक्रोनस डेटा हैंडलिंग और रि-रेंडर्स का अनुकूलन।
अगले कदम में, डेवलपर्स Redux या Zustand जैसे उन्नत स्टेट मैनेजमेंट टूल्स का अध्ययन कर सकते हैं, ताकि यह समझा जा सके कि Context कब पर्याप्त है और कब एक डेडिकेटेड स्टेट मैनेजमेंट आवश्यक है। Context API का व्यावहारिक उपयोग रीयल प्रोजेक्ट्स में स्केलेबिलिटी, प्रदर्शन और मेंटेनबिलिटी सुनिश्चित करता है।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी