यूज़मेमो हुक रिएक्ट के हुक एपीआई का एक हिस्सा है, जिसे रिएक्ट 16.8 में पेश किया गया है, जिसे महंगी गणनाओं के परिणामों को याद करके प्रदर्शन को अनुकूलित करने के लिए डिज़ाइन किया गया है। यहां एक विस्तृत विवरण दिया गया है:

यूज़मेमो क्या है?

useMemo एक हुक है जो एक मेमोइज़्ड मान लौटाता है। यह आपको गणना के परिणाम को कैश करने की अनुमति देता है ताकि प्रत्येक रेंडर पर इसकी पुनर्गणना न करनी पड़े जब तक कि इसकी निर्भरता न बदल जाए। यह अनावश्यक पुन: प्रस्तुतीकरण को रोकने और आपके रिएक्ट एप्लिकेशन के प्रदर्शन को बेहतर बनाने में मदद कर सकता है।

सिंटेक्स

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

पैरामीटर

1. फ़ंक्शन (कॉलबैक): एक फ़ंक्शन जो वह मान लौटाता है जिसे आप याद रखना चाहते हैं।
2. निर्भरता सरणी: निर्भरता की एक सरणी, जिसे बदलने पर, याद किए गए मान की पुन: गणना की जाएगी। यदि यह सरणी खाली है, तो मान की गणना केवल एक बार की जाएगी (जैसे कंपोनेंटडिडमाउंट)।

यह काम किस प्रकार करता है

• प्रारंभिक रेंडर पर, यूज़मेमो दिए गए फ़ंक्शन को चलाएगा और अपना परिणाम लौटाएगा, जो memoizedValue में संग्रहीत है।
• बाद के रेंडर पर, रिएक्ट जांच करेगा कि क्या कोई निर्भरता बदल गई है। यदि उन्होंने ऐसा नहीं किया है, तो यह पुन: गणना करने के बजाय कैश्ड मान लौटा देगा।
• यदि कोई निर्भरता बदल गई है, तो रिएक्ट फ़ंक्शन को फिर से निष्पादित करेगा, कैश्ड मान को अपडेट करेगा, और नया मान लौटाएगा।

उदाहरण

उपयोगमेमो को स्पष्ट करने के लिए यहां एक सरल उदाहरण दिया गया है:

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n  computeFactorial(number), [number]);

  return (
    

      
Factorial of {number} is {factorial}
    
  );
};

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

  return (
    

       setNum(num   1)}>Increase Number
      
    
  );
};

export default App;

यूज़मेमो का उपयोग कब करें

• महंगी गणनाएं: जब आपके पास ऐसी गणनाएं हों जो प्रदर्शन के मामले में महंगी हों और जब विशिष्ट इनपुट बदलते हैं तो केवल पुनर्गणना करने की आवश्यकता होती है, तो यूज़मेमो का उपयोग करें।
• अनावश्यक रेंडर से बचना: यदि आप ऑब्जेक्ट या ऐरे को चाइल्ड घटकों के लिए प्रॉप्स के रूप में पास करते हैं, तो आप यह सुनिश्चित करने के लिए यूज़मेमो का उपयोग कर सकते हैं कि वे हर रेंडर पर दोबारा न बनें, अनावश्यक री-रेंडर को रोकें।

महत्वपूर्ण विचार

• प्रदर्शन: यूज़मेमो का अत्यधिक उपयोग अधिक जटिल कोड को जन्म दे सकता है और हमेशा प्रदर्शन लाभ नहीं दे सकता है। वास्तव में महंगी गणनाओं के लिए इसका उपयोग करना सबसे अच्छा है।
• फ़ंक्शन री-क्रिएशन: यदि आप फ़ंक्शंस को याद कर रहे हैं, तो सावधान रहें क्योंकि फ़ंक्शन परिभाषा तब भी फिर से बनाई जाएगी जब तक कि यूज़कॉलबैक में लपेटा न जाए।

निष्कर्ष

useMemo मूल्यों को याद करके प्रदर्शन को अनुकूलित करने के लिए रिएक्ट में एक शक्तिशाली उपकरण है। यह सुनिश्चित करने में मदद कर सकता है कि महंगी गणनाएँ केवल आवश्यक होने पर ही की जाती हैं, इस प्रकार आपके रिएक्ट घटकों की दक्षता बढ़ जाती है। हालाँकि, आपके कोड में अनावश्यक जटिलता से बचने के लिए इसका उपयोग विवेकपूर्ण ढंग से किया जाना चाहिए।