React में प्रदर्शन अनुकूलन हुक useMemo

प्रदर्शन अनुकूलन के लिए पहला हुक जिसे हम देखेंगे - वह है useMemo।

यह हुक स्क्रीन के पुनः रेंडर के बीच संसाधन-गहन ऑपरेशनों के परिणामों को कैश करने में मदद करता है और तदनुसार अनावश्यक भारी गणनाओं से बचने में मदद कर सकता है। इस तरह के कैशिंग को मेमोइजेशन भी कहा जाता है।

आइए देखें कि यह कैसे काम करता है। आइए एक बटन और h3 हेडिंग वाला एक कंपोनेंट बनाएं:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

और अब ऐसा करते हैं कि हेडिंग पर क्लिक करने पर उसका रंग नारंगी से हरे में और वापस बदल जाए। शुरुआत के लिए आइए एक isGreen स्टेट बनाएं:

const [isGreen, setIsGreen] = useState(false);

हेडिंग के style एट्रिब्यूट में हेडिंग के रंग को बदलने की condition और क्लिक हैंडलर जोड़ते हैं:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

मान लीजिए कि हमारे पास कोई ऐसा value भी है, जो हमारे बटन पर क्लिक करने पर एक से बढ़ जाएगा। आइए इसके लिए एक स्टेट बनाएं:

const [num, setNum] = useState(0);

बटन पर क्लिक करने का हैंडलिंग जोड़ते हैं:

<button onClick={() => setNum(num + 1)}>
	clicks
</button>

मान लीजिए कि हमारे पास एक square फंक्शन भी है, जो num value का वर्ग (square) लौटाएगा। फंक्शन कॉल का result हम result वेरिएबल में लिखेंगे:

const result = square(num);

function square(num) {
	return num * num;
}

बटन के टेक्स्ट में result दिखाते हैं:

<button onClick={() => setNum(num + 1)}>
	clicks: {result}
</button>

नतीजतन, हमें निम्नलिखित मिला: बटन पर क्लिक करने पर value बदल जाती है num, जिसे फिर वर्ग (square) किया जाता है, और हेडिंग पर क्लिक करने पर हेडिंग का रंग बदल जाता है।

हमारा कंपोनेंट बहुत छोटा है, सब कुछ तेजी से काम कर रहा है, इस तथ्य के बावजूद कि क्लिक करने पर हेडिंग के रंग को बदलने के लिए पूरा कंपोनेंट फिर से रेंडर होता है, तदनुसार, वे गणनाएँ फिर से होती हैं जो बटन से जुड़ी हुई हैं, और यह तब भी हो रहा है जब हमने उसे हाथ नहीं लगाया। और अब कल्पना करें कि अगर हमारी गणनाएँ भारी होतीं और हर बार सब कुछ फिर से गिना जाता।

आइए, अपने फ़ंक्शन को थोड़ा भारी करते हैं, अब यह थोड़ी देर longer सोचेगा। इस तरह हम लंबी गणनाओं का अनुकरण करेंगे:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Just do nothing ...
	}
	
	return num * num;
}

अब हेडिंग पर क्लिक करें। यह पता चलता है कि अब फ़ंक्शन square के लंबे समय तक चलने के कारण (और हमने बटन को तो छुआ भी नहीं) हेडिंग का रंग बदलने के लिए हमें एक लंबा इंतज़ार करना पड़ रहा है!

यहीं पर हुक useMemo हमारी मदद के लिए आता है। इसके लिए, हमें पहले पैरामीटर के रूप में वह फ़ंक्शन पास करना होगा जो उस value की गणना करता है, जिसे हम कैश करना चाहते हैं, यह फ़ंक्शन शुद्ध (pure) होना चाहिए और कोई भी पैरामीटर नहीं लेना चाहिए। और दूसरे पैरामीटर के रूप में - square brackets में dependencies (निर्भरताएं), दूसरे शब्दों में, सभी रिएक्टिव वैल्यूज जो फ़ंक्शन के कोड में भाग लेती हैं। इस प्रकार, result में अब हम इस तरह का structure लिखेंगे:

const result = useMemo(() => square(num), [num]);

फिर से हेडिंग पर क्लिक करें। अब, अगर हम गणना वाले बटन को नहीं छूते हैं और इस तरह स्टेट की value नहीं बदलते हैं num, तो कुछ भी पुनर्गणना (recalculate) नहीं होता है, और React बटन में कैश की गई value दिखाता है, इसलिए हमारी हेडिंग जल्दी से अपना रंग बदल देती है।

एक App कंपोनेंट बनाएं, इसमें एक पैराग्राफ रखें। text नामक एक स्टेट बनाएं जिसकी शुरुआती value 'react' हो, स्टेट की value को पैराग्राफ के टेक्स्ट के रूप में दिखाया जाना चाहिए। पैराग्राफ पर क्लिक करने पर उसके टेक्स्ट के अंत में एक विस्मयादिबोधक चिन्ह (!) जुड़ जाना चाहिए।

एक और स्टेट num बनाएं, जिसकी शुरुआती value 0 हो। App में एक और पैराग्राफ रखें। ऐसा करें कि इस पर क्लिक करने पर num 1 से बढ़ जाए।

और अब App में triple नामक फंक्शन जोड़ें, जो पैरामीटर के रूप में num लेता है और उसका तीन गुना value लौटाता है। फ़ंक्शन कॉल का result result वेरिएबल में रखें। result को दूसरे पैराग्राफ के टेक्स्ट के रूप में दिखाएं। पैराग्राफ पर बारी-बारी से क्लिक करें, ध्यान दें कि विस्मयादिबोधक चिन्ह कितनी धीरे-धीरे जुड़ रहे हैं।

स्थिति को सही करें, धीमे फ़ंक्शन triple को useMemo में wrap करके।