प्रदर्शन के लिए useCallback और useMemo
अनावश्यक बाल-कॉम्पोनेंट पुनः-रेंडर रोकने के लिए कॉलबैक फ़ंक्शन को useCallback से मेमोाइज़ करें और महँगे परिकलित मानों को useMemo से कैश करें।
प्रदर्शन के लिए useCallback और useMemo, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
री-रेंडर की समस्या
React में हर बार जब कोई कॉम्पोनेंट दोबारा रेंडर होता है, तो फ़ंक्शन बॉडी के अंदर बनाए गए सभी मान फिर से बनाए जाते हैं। इनमें ऑब्जेक्ट, ऐरे और सबसे महत्वपूर्ण — फ़ंक्शन — शामिल हैं। यदि फिर से बनाया गया फ़ंक्शन या मान किसी चाइल्ड कॉम्पोनेंट को प्रॉप के रूप में दिया जाता है, तो चाइल्ड को नया रेफ़रेंस दिखाई देता है और वह दोबारा रेंडर होता है, भले ही तार्किक मान बदला न हो।
useCallback क्या है?
useCallback(fn, deps) कॉलबैक फ़ंक्शन का मेमोाइज़ किया हुआ संस्करण लौटाता है, जो केवल तभी बदलता है जब उसकी किसी निर्भरता में बदलाव हो। कॉलबैक को useCallback में लपेटने से रेंडर के बीच उसी फ़ंक्शन रेफ़रेंस को बनाए रखा जाता है और इसे प्रॉप के रूप में प्राप्त करने वाले चाइल्ड कॉम्पोनेंट के अनावश्यक री-रेंडर रुकते हैं।
import { useCallback } from 'react';
function Parent() {
const [count, setCount] = useState(0);
// handlePress is the SAME function reference between renders
// as long as count does not change
const handlePress = useCallback(() => {
console.log('Pressed, count is:', count);
}, [count]);
return <Child onPress={handlePress} />;
}React.memo के साथ useCallback
useCallback सबसे प्रभावी तब होता है जब इसे चाइल्ड कॉम्पोनेंट पर React.memo के साथ जोड़ा जाए। React.memo के बिना प्रॉप रेफ़रेंस समान होने पर भी चाइल्ड दोबारा रेंडर होता है। चाइल्ड पर React.memo और पैरेंट कॉलबैक पर useCallback का संयोजन तब री-रेंडर रोकता है जब व्यवहार और डेटा दोनों में कोई बदलाव न हुआ हो।
const ChildButton = React.memo(({ onPress, label }) => (
<Button title={label} onPress={onPress} />
));
function Parent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
// ChildButton will NOT re-render when text changes
const handleCount = useCallback(() => setCount(c => c + 1), []);
return (
<>
<TextInput value={text} onChangeText={setText} />
<ChildButton label='Count' onPress={handleCount} />
</>
);
}useMemo क्या है?
useMemo(computeFn, deps) महँगी गणना के परिणाम को मेमोाइज़ करता है। React पहले रेंडर पर computeFn कॉल करता है और उसके लौटाए मान को कैश करता है। बाद के रेंडर में, जब तक कोई निर्भरता नहीं बदलती, यह कैश किया हुआ मान लौटाता है। इससे हर रेंडर पर भारी गणनाएँ दोहराने से बचा जाता है।
import { useMemo } from 'react';
function ProductList({ products, category }) {
// Only recomputes when products or category changes
const filtered = useMemo(
() => products.filter((p) => p.category === category),
[products, category]
);
return <FlatList data={filtered} renderItem={renderItem} />;
}स्थिर ऑब्जेक्ट रेफ़रेंस के लिए useMemo
JSX में सीधे बनाए गए ऑब्जेक्ट और ऐरे हर रेंडर पर नए रेफ़रेंस होते हैं। मेमोाइज़ किए गए चाइल्ड को पास करने पर वे मेमोाइज़ेशन को निष्प्रभावी कर देते हैं। उन्हें useMemo में लपेटकर ऐसा स्थिर रेफ़रेंस बनाएँ जो केवल अंतर्निहित डेटा बदलने पर बदले। यह स्टाइल ऐरे और कॉन्फ़िगरेशन ऑब्जेक्ट के लिए विशेष रूप से महत्वपूर्ण है।
function Chart({ data, color }) {
// New object on every render without useMemo
const chartConfig = useMemo(() => ({
backgroundColor: color,
dataPoints: data.map((d) => d.value),
}), [data, color]);
return <ChartComponent config={chartConfig} />;
}निर्भरता ऐरे: उन्हें सही रखना
useCallback और useMemo दोनों के लिए सटीक निर्भरता ऐरे आवश्यक हैं। कॉम्पोनेंट के scope से उस हर मान को शामिल करें जिसका उपयोग मेमोाइज़ किए गए फ़ंक्शन या गणना के भीतर होता है। निर्भरता छोड़ देने पर मेमोाइज़ किया गया मान पुराने क्लोज़र का उपयोग करता है; बहुत अधिक निर्भरताएँ देने पर अनावश्यक रूप से फिर गणना होती है। ESLint का exhaustive-deps नियम सहीपन लागू करने में सहायता करता है।
// Wrong: missing userId dependency — stale closure bug
const fetchUser = useCallback(() => fetch('/user/' + userId), []);
// Correct: userId is listed
const fetchUser = useCallback(() => fetch('/user/' + userId), [userId]);useCallback का उपयोग कब NOT करें
useCallback की एक लागत है: React फ़ंक्शन को मेमोरी में रखता है और हर रेंडर पर निर्भरता ऐरे की जाँच करता है। ऐसे सरल हैंडलर जिन्हें मेमोाइज़ किए गए चाइल्ड को पास नहीं किया जाता, उनके लिए useCallback का अतिरिक्त खर्च उसके लाभ से अधिक होता है। इसका चयनित रूप से उपयोग करें — केवल तब जब चाइल्ड कॉम्पोनेंट React.memo में लिपटा हो और प्रदर्शन के लिए प्रॉप्स की समानता महत्वपूर्ण हो।
// Unnecessary: Button re-renders anyway; no child is memoized
const handlePress = useCallback(() => setVisible(true), []);
// Fine without useCallback in this case
const handlePress = () => setVisible(true);महँगे रूपांतरणों के लिए useMemo
जब किसी गणना में ध्यान देने योग्य समय लगे, तब useMemo का उपयोग करें — जैसे बड़े ऐरे को sort करना, जटिल डेटा को पार्स करना या सांख्यिकीय गणनाएँ चलाना। सामान्य नियम यह है: यदि गणना में एक मिलीसेकंड से अधिक समय लगता है और हर रेंडर पर चलती है, तो उसे मेमोाइज़ करने पर विचार करें। साधारण कार्यों (जैसे दो संख्याएँ जोड़ना) के लिए मेमोाइज़ेशन का अतिरिक्त खर्च स्वयं गणना से अधिक होता है।
const sortedAndFiltered = useMemo(() => {
return items
.filter((item) => item.status === selectedStatus)
.sort((a, b) => b.createdAt - a.createdAt)
.slice(0, 100);
}, [items, selectedStatus]);FlatList में renderItem के लिए useCallback
FlatList के renderItem फ़ंक्शन को useCallback में लपेटने से हर पैरेंट रेंडर पर नया फ़ंक्शन रेफ़रेंस बनने से बचता है, जो प्रत्येक दिखाई देने वाली FlatList पंक्ति को दोबारा रेंडर करा सकता था। सूची-प्रधान React Native ऐप्स में यह प्रदर्शन सुधारने के सबसे प्रभावशाली तरीकों में से एक है।
const renderItem = useCallback(({ item }) => (
<ProductCard
product={item}
onPress={handleSelectProduct}
/>
), [handleSelectProduct]); // handleSelectProduct also memoized
<FlatList
data={products}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>प्रभाव मापना
हर जगह मेमोाइज़ेशन जोड़ने से पहले React DevTools Profiler का उपयोग करके वास्तविक प्रभाव मापें। किसी इंटरैक्शन को रिकॉर्ड करें, अनावश्यक रूप से दोबारा रेंडर होने वाले कॉम्पोनेंट पहचानने के लिए फ्लेम चार्ट देखें और केवल वहीं useCallback या useMemo जोड़ें जहाँ प्रोफ़ाइलर वास्तविक अड़चन दिखाता हो। समय से पहले किया गया अनुकूलन बिना मापने योग्य लाभ के कोड की जटिलता बढ़ाता है।
संक्षिप्त तुलना
मुख्य अंतर याद रखें: useCallback एक फ़ंक्शन को मेमोाइज़ करता है (फ़ंक्शन रेफ़रेंस को फिर से बनने से रोकता है), जबकि useMemo एक गणना किए गए मान को मेमोाइज़ करता है (महँगी गणना को फिर से चलने से रोकता है)। दोनों निर्भरता ऐरे स्वीकार करते हैं और केवल सूचीबद्ध निर्भरताएँ बदलने पर फिर गणना करते हैं।
// useCallback — memoize a function
const fn = useCallback(() => doSomething(a, b), [a, b]);
// useMemo — memoize a computed value
const val = useMemo(() => computeExpensive(a, b), [a, b]);
// Relationship: useCallback(fn, deps) === useMemo(() => fn, deps)त्वरित जाँच
इस पाठ में प्रदर्शन के लिए useCallback और useMemo की अपनी समझ को जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: useCallback अनावश्यक चाइल्ड री-रेंडर रोकने के लिए फ़ंक्शन रेफ़रेंस को मेमोाइज़ करता है, useMemo हर रेंडर पर फिर से गणना करने से बचने के लिए महँगे गणना किए गए मान को मेमोाइज़ करता है, और दोनों React.memo तथा सटीक निर्भरता ऐरे के साथ सबसे अच्छा काम करते हैं। अब हम कॉम्पोनेंट के बीच स्टेटफुल लॉजिक साझा करने के लिए कस्टम हुक लिखना सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “प्रदर्शन के लिए useCallback और useMemo” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “प्रदर्शन के लिए useCallback और useMemo” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“प्रदर्शन के लिए useCallback और useMemo” में मैं क्या सीखूँगा?
अनावश्यक बाल-कॉम्पोनेंट पुनः-रेंडर रोकने के लिए कॉलबैक फ़ंक्शन को useCallback से मेमोाइज़ करें और महँगे परिकलित मानों को useMemo से कैश करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“प्रदर्शन के लिए useCallback और useMemo” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- DOM नोड और परिवर्तनीय मानों के लिए useRef
- जटिल स्थिति तर्क के लिए useReducer
- प्रदर्शन के लिए useCallback और useMemo
- कस्टम हुक लिखना