useMemo और useCallback दो शक्तिशाली रिएक्ट हुक हैं जो अनावश्यक री-रेंडर को रोकने में महत्वपूर्ण भूमिका निभाते हैं जिसके परिणामस्वरूप घटक प्रदर्शन को अनुकूलित किया जाता है। वे डेवलपर्स के लिए उत्तरदायी और कुशल रिएक्ट एप्लिकेशन बनाने के लिए आवश्यक उपकरण हैं।

इस गाइड में यूज़मेमो और यूज़कॉलबैक के बारे में विस्तार से बताया जाएगा कि उनकी समानताएं क्या हैं और वे एक-दूसरे से कैसे भिन्न हैं। हम समझेंगे कि उन्हें कैसे लागू करना है, प्रत्येक का उपयोग कब करना है।

आपको यूज़मेमो या यूज़कॉलबैक का उपयोग क्यों करना चाहिए

आमतौर पर रिएक्ट में अधिकांश गणना तेज होती है, लेकिन कभी-कभी आपके पास बहुत बड़ी सरणी पर गणना होती है, या कुछ महंगी गणना होती है जिसे हर री-रेंडर पर निष्पादित करने की आवश्यकता नहीं होती है।

यूज़मेमो और यूज़कॉलबैक हुक री-रेंडरर्स के बीच उन महंगी गणनाओं को कैश करके इस समस्या को हल करने में मदद कर सकते हैं।

यूज़मेमो क्या है और इसका उपयोग कैसे करें।

useMemo रिएक्ट हुक है जो री-रेंडर के बीच गणना के परिणाम को कैश करता है और इसमें दो तर्क लगते हैं:

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

मेमो का उपयोग करें

री-रेंडर के बीच गणना को कैश करने के लिए इसे घटक के शीर्ष स्तर पर एक यूज़मेमो हुक लपेटें।

useMemo(एफएन, निर्भरता)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

ध्यान दें कि यूज़मेमो का पहला पैरामीटर बिना किसी पैरामीटर वाला एक फ़ंक्शन है।

पहली बार रिएक्ट यूज़मेमो के पहले पैरामीटर के परिणाम मान की गणना करेगा, फिर दूसरे पैरामीटर को याद करेगा जो निर्भरता की सूची है। रिएक्ट पुन: रेंडरर्स के बीच परिकलित परिणाम को कैश कर देगा और केवल तभी परिणाम की पुनः गणना करेगा जब निर्भरता मानों में से एक में परिवर्तन होगा।

यूज़कॉलबैक क्या है और इसका उपयोग कैसे करें।

useCallback हुक, useMemo हुक के समान है, इसमें केवल इतना अंतर है कि यह हुक मान की गणना किए बिना फ़ंक्शन (useCallback के लिए पहला पैरामीटर) को कैश कर देगा। इसके अलावा फ़ंक्शन यूज़मेमो के विपरीत पैरामीटर स्वीकार कर सकता है।

यूज़कॉलबैक का उपयोग करने के लिए आपको पैरामीटर पास करने होंगे:

• एक फ़ंक्शन परिभाषा जिसे कैश करने की आवश्यकता है।
• निर्भरताओं की सूची

const कैश्डएफएन = यूज़कॉलबैक(एफएन, निर्भरता)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

यूज़कॉलबैक की जगह यूज़मेमो का उपयोग कब करें

यदि आप मुख्य रूप से गणना के परिणाम को अनुकूलित करने के बारे में चिंतित हैं, तो यूज़मेमो का उपयोग करें।
यदि आप मुख्य रूप से फ़ंक्शन परिवर्तनों के कारण अनावश्यक पुन: प्रस्तुतीकरण को रोकने के बारे में चिंतित हैं, तो यूज़कॉलबैक का उपयोग करें।

किसी घटक का पुन: प्रस्तुतीकरण छोड़ना

कभी-कभी आपके पास एक मूल घटक होगा जिसे पुन: प्रस्तुत करने की आवश्यकता होगी जिसके परिणामस्वरूप चाइल्ड घटक का पुन: प्रस्तुतीकरण भी होगा। मेमो का उपयोग करके किसी घटक को कैश करना संभव है।

आइए मान लें कि हमारे पास थीम स्थिति के साथ एक टोडोलिस्ट घटक है, और चाइल्ड के रूप में एक सूची घटक है। जब भी थीम की स्थिति बदलती है तो सूची घटक को पुनः प्रस्तुत करें जो आवश्यक नहीं है। इस समस्या को हल करने के लिए मेमो का उपयोग करें।

हम सूची के कार्यात्मक घटक को मेमो के साथ लपेटते हैं।

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

निष्कर्ष

इस व्यापक गाइड में हमने यूज़मेमो और यूज़कॉलबैक हुक को समझा है, उनमें से प्रत्येक का उपयोग कैसे करें, उनमें से प्रत्येक का उपयोग कब करें, और रिएक्ट एप्लिकेशन के प्रदर्शन को अनुकूलित करने के लिए उनके लाभों के बारे में बताया है।