कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना
कॉन्टेक्स्ट मानों में बदलाव से होने वाले अनावश्यक पुनः-रेंडर पहचानें, कॉन्टेक्स्ट को कई प्रदाताओं में बाँटें और प्रदर्शन बेहतर करने के लिए कॉन्टेक्स्ट मानों को मेमोाइज़ करें।
कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
संदर्भ के फिर से रेंडर होने की समस्या
जब Context Provider नए value के साथ फिर से रेंडर होता है, तो उस संदर्भ के लिए useContext बुलाने वाला हर घटक फिर से रेंडर होता है, भले ही उसके द्वारा उपयोग किए जाने वाले मान का विशिष्ट भाग बदला हो या नहीं। कई उपभोक्ताओं वाले बड़े ऐप में इससे कार्यक्षमता से जुड़ी गंभीर समस्याएँ पैदा हो सकती हैं।
अनावश्यक संदर्भ पुनः-रेंडर का निदान
बहुत अधिक बार फिर से रेंडर होने वाले घटकों की पहचान करने के लिए React DevTools Profiler का उपयोग करें। ऐसा इंटरैक्शन रिकॉर्ड करें, जिसका प्रभाव केवल UI के एक भाग पर पड़ना चाहिए, फिर देखें कि फ्लेम चार्ट में कौन-से घटक हाइलाइट हुए हैं। यदि केवल संदर्भ के एक हिस्से को पढ़ने वाले घटक किसी असंबंधित हिस्से के बदलने पर भी फिर से रेंडर होते हैं, तो यह कार्यक्षमता की समस्या है।
इनलाइन ऑब्जेक्ट का गलत पैटर्न
अनावश्यक संदर्भ पुनः-रेंडर का सबसे सामान्य कारण JSX में सीधे मान वाला ऑब्जेक्ट बनाना है। इससे Provider के हर रेंडर पर नया ऑब्जेक्ट संदर्भ बनता है, जिसे React बदला हुआ मान मानता है — भले ही उसकी सामग्री समान हो — और सभी उपभोक्ताओं में पुनः-रेंडर की श्रृंखला शुरू हो जाती है।
// Bad: new object on every render
<MyContext.Provider value={{ user, logout }}>
// Good: stable reference with useMemo
const value = useMemo(() => ({ user, logout }), [user, logout]);
<MyContext.Provider value={value}>useMemo से संदर्भ मानों को मेमोरी में रखना
Provider के भीतर संदर्भ मान वाले ऑब्जेक्ट को useMemo में लपेटें। React नया ऑब्जेक्ट तभी बनाएगा और उपभोक्ताओं को तभी सूचित करेगा, जब सूचीबद्ध निर्भरताओं में से कोई बदले। संदर्भ की कार्यक्षमता से जुड़ी समस्याओं का यह सबसे सरल और प्रभावी समाधान है।
function CartProvider({ children }) {
const [items, setItems] = useState([]);
const addItem = useCallback((item) => {
setItems((prev) => [...prev, item]);
}, []);
const value = useMemo(() => ({
items,
addItem,
total: items.reduce((sum, i) => sum + i.price, 0),
}), [items, addItem]);
return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}स्वतंत्र सरोकारों के लिए संदर्भ अलग करना
यदि आपके संदर्भ में अक्सर बदलने वाले मान (जैसे कार्ट आइटम की संख्या) और कम बदलने वाले मान (जैसे उपयोगकर्ता प्रोफ़ाइल) दोनों हैं, तो केवल स्थिर डेटा की आवश्यकता वाले उपभोक्ताओं को भी अस्थिर डेटा बदलने पर फिर से रेंडर होना पड़ता है। इसका समाधान संदर्भ को दो अलग-अलग Provider में बाँटना है — हर सरोकार के लिए एक।
// Instead of one big UserContext:
export const UserDataContext = createContext(null); // changes rarely
export const UserActionsContext = createContext(null); // changes rarely
export const CartItemsContext = createContext([]); // changes often
// Consumers only subscribe to what they useस्थिति और डिस्पैच को अलग करना
एक सिद्ध पैटर्न संदर्भ को स्थिति संदर्भ और डिस्पैच संदर्भ में बाँटना है। डिस्पैच फ़ंक्शन कभी नहीं बदलते (useCallback या useReducer का डिस्पैच स्थिर होता है), इसलिए केवल कार्रवाइयाँ भेजने वाले घटक स्थिति में बदलाव के कारण फिर से रेंडर नहीं होते। स्थिति पढ़ने वाले घटक ही स्थिति बदलने पर फिर से रेंडर होते हैं।
export const AppStateContext = createContext(null);
export const AppDispatchContext = createContext(null);
function AppProvider({ children }) {
const [state, dispatch] = useReducer(appReducer, initialState);
return (
<AppStateContext.Provider value={state}>
<AppDispatchContext.Provider value={dispatch}>
{children}
</AppDispatchContext.Provider>
</AppStateContext.Provider>
);
}React.memo संदर्भ उपभोक्ताओं की सहायता नहीं करता
एक सामान्य गलती यह है कि संदर्भ बदलावों के कारण होने वाले पुनः-रेंडर को रोकने के लिए संदर्भ उपभोक्ताओं को React.memo में लपेट दिया जाए। ऐसा नहीं होता — React.memo केवल प्रॉप्स की तुलना करता है, संदर्भ सदस्यताओं की नहीं। संदर्भ का उपयोग करने वाला घटक संदर्भ मान बदलने पर हमेशा फिर से रेंडर होगा, चाहे React.memo का उपयोग किया गया हो या नहीं।
// React.memo does NOT prevent context-driven re-renders
const MyComponent = React.memo(() => {
const { value } = useContext(MyContext);
// Still re-renders every time MyContext changes
return <Text>{value}</Text>;
});
// Solution: Split context or memoize the value in the Providerसंदर्भ के लिए चयनकर्ता पैटर्न
यदि आपको Redux के useSelector जैसी सूक्ष्म सदस्यताओं की आवश्यकता है, तो आप एक सरल चयनकर्ता पैटर्न लागू कर सकते हैं। एक कस्टम हुक चयनकर्ता फ़ंक्शन स्वीकार करता है और useMemo से चुने गए मान को मेमोरी में रखता है। पुनः-रेंडर तभी होता है जब चुना गया मान बदले, पूरे संदर्भ के बदलने पर नहीं।
function useCartTotal() {
const { items } = useContext(CartContext);
// Only recomputes when items changes
return useMemo(
() => items.reduce((sum, item) => sum + item.price, 0),
[items]
);
}
// Component only re-renders when the total number changes
function CartBadge() {
const total = useCartTotal();
return <Text>${total.toFixed(2)}</Text>;
}Provider को हल्का रखना
Provider घटक स्वयं जितना संभव हो उतना सरल होना चाहिए। महँगी गणनाओं को Provider के रेंडर से बाहर useMemo में या reducer में ले जाएँ। हर रेंडर पर Provider JSX के भीतर डेटा प्राप्त करने, भारी रूपांतरण चलाने या बड़े ऑब्जेक्ट सीधे बनाने से बचें।
एक विशाल संदर्भ के बजाय संयोजन
ऐप की पूरी वैश्विक स्थिति को एक ही संदर्भ में रखने के मोह से बचें। बेहतर संरचना में कई छोटे और केंद्रित संदर्भ होते हैं: प्रमाणीकरण के लिए AuthContext, रंगों के लिए ThemeContext, कार्ट के लिए CartContext और अलर्ट के लिए NotificationContext। हर संदर्भ केवल अपने उपभोक्ताओं को फिर से रेंडर करता है, जिससे प्रत्येक पुनः-रेंडर का दायरा छोटा और अनुमानित रहता है।
// Architecture with focused contexts
export default function App() {
return (
<AuthProvider>
<ThemeProvider>
<CartProvider>
<NotificationProvider>
<AppContent />
</NotificationProvider>
</CartProvider>
</ThemeProvider>
</AuthProvider>
);
}Zustand या Redux पर विचार कब करें
यदि संदर्भ की कार्यक्षमता को बेहतर बनाने के उपाय बहुत जटिल हो जाएँ — या आप स्वयं एक विस्तृत चयनकर्ता प्रणाली बनाने लगें — तो Zustand या Redux Toolkit पर जाने पर विचार करें। ये लाइब्रेरी पहले से सूक्ष्म सदस्यताएँ उपलब्ध कराती हैं और बड़े स्तर पर स्थिति प्रबंधन के लिए बनाई गई हैं। थीम, प्रमाणीकरण और वरीयताओं जैसे सरल वैश्विक मानों के लिए संदर्भ अब भी आदर्श है।
त्वरित जाँच
इस पाठ से संदर्भ की कार्यक्षमता संबंधी समस्याओं से बचने की अपनी समझ की जाँच करें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: Provider JSX में सीधे बनाए गए मान वाले ऑब्जेक्ट अनावश्यक पुनः-रेंडर कराते हैं — उन्हें स्थिर रखने के लिए useMemo का उपयोग करें, पुनः-रेंडर का दायरा सीमित करने के लिए बड़े संदर्भों को केंद्रित छोटे संदर्भों में बाँटें, और स्थिति तथा डिस्पैच को दो संदर्भों में अलग करें, ताकि केवल कार्रवाई करने वाले घटक स्थिति बदलने पर फिर से रेंडर न हों। आगे हम डेटा प्राप्त करने के लिए useEffect हुक और निर्भरता सारणियों का अध्ययन करेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना” में मैं क्या सीखूँगा?
कॉन्टेक्स्ट मानों में बदलाव से होने वाले अनावश्यक पुनः-रेंडर पहचानें, कॉन्टेक्स्ट को कई प्रदाताओं में बाँटें और प्रदर्शन बेहतर करने के लिए कॉन्टेक्स्ट मानों को मेमोाइज़ करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- कॉन्टेक्स्ट बनाना और उपलब्ध कराना
- useContext से कॉन्टेक्स्ट का उपयोग
- डार्क मोड टॉगल वाला Theme Context
- कॉन्टेक्स्ट से जुड़ी प्रदर्शन समस्याओं से बचना