प्रतिक्रिया में मेमो का उपयोग कब और कैसे करें

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

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

useMemo एक बेहतरीन बिल्ट-इन हुक है जो आपके वेब ऐप के प्रदर्शन में मदद कर सकता है। हम जानते हैं कि प्रतिक्रिया में, जब भी घटक की स्थिति या प्रॉप्स में कोई परिवर्तन होता है, तो घटकों का प्रतिपादन किया जाता है।

पुन: प्रदान किए गए घटक उन कार्यों की भी पुनर्गणना करेंगे जिनका उपयोग किया जा रहा है।

इसलिए, यदि भारी, महंगे कार्य हैं, तो प्रदर्शन प्रभावित हो सकता है क्योंकि हर बार उनकी गणना की जानी चाहिए। useMemo प्रदर्शन को अनुकूलित करने के लिए इन कार्यों को याद रखने में मदद करता है।

रिएक्ट में मेमो कैसे काम करता है?

UseMemo को समझने के लिए, हमें इस बात पर विचार करने की आवश्यकता है कि मेमोइज़ेशन क्या है ।

यदि कोई ऐसा कार्य है जो महंगा है, जैसे कि बहुत अधिक डेटा प्राप्त करना, मेमोइज़ेशन उस फ़ंक्शन के परिणाम को संग्रहीत करने का एक तरीका है ताकि इसे बार-बार कॉल न करना पड़े।

useMemo उस फ़ंक्शन को ले जाएगा जिसे वह लपेट रहा है, और उस फ़ंक्शन के परिणामों को कैश करेगा ताकि जब आवश्यक हो तो यह आपको फिर से गणना किए बिना प्रदान किया जा सके।

आप प्रतिक्रिया में मेमो का उपयोग कैसे करते हैं?

बिल्ट-इन हुक के रूप में, आप हुक को रिएक्ट से आयात कर सकते हैं और इसे शीर्ष स्तर पर उपयोग कर सकते हैं।

फिर, आप कुछ स्थिर या चर घोषित करके और इसे अपने हुक के परिणाम के लिए असाइन करके अपनी महंगी संगणना को useMemo के साथ लपेट सकते हैं।

अपनी निर्भरताओं को जोड़ने के लिए मत भूलना क्योंकि इस तरह मेमो का उपयोग यह निर्धारित करता है कि इसे फिर से फ़ंक्शन को फिर से कंप्यूट करना चाहिए या नहीं।

यदि आपकी निर्भरता बदल जाती है, तो मेमो मूल्य को फिर से गणना करने के बारे में जानेंगे ताकि यह हर समय सही परिणाम को कैश कर रहा हो।

 import { useMemo } from 'react' ; function someExpensiveFunction ( n ) {   return n * n; } function myFunction ( {n} ) {   const result = useMemo( () => someExpensiveFunction(n), [n]);   return (       < div > {result} </ div >
 ); }

उदाहरण के लिए, यदि आप मान 5 से पास हो गए हैं

 n

 n

यह विशेष रूप से तब उपयोगी होता है जब आपका फ्रंटएंड एप्लिकेशन एपीआई के लिए अनुरोध कर रहा हो।

ये अनुरोध महंगे हो सकते हैं, खासकर यदि आप बड़ी मात्रा में डेटा प्राप्त कर रहे हैं।

शायद आपके एप्लिकेशन में कुछ घटक हैं जिन्हें इस डेटा की आवश्यकता है, लेकिन आप हर बार घटक प्रदान किए जाने पर एपीआई कॉल नहीं करना चाहते हैं।

फिर, useMemo के साथ अपने परिणामों को कैशिंग करना आपका सबसे अच्छा दांव हो सकता है।

 import React, { useMemo } from 'react' ; import axios from 'axios' ; const ApiComponent = () => {   const memoizedResults = useMemo( async () => {       try {           const apiResponse = await axios.get( 'http://apicall.com/somedata' );           return apiResponse.data; } catch (error) {           return error; } }, []);   return (       < div > {apiResponse} </ div >
 ) }

जैसा कि आप देख सकते हैं, हमारी निर्भरता खाली है क्योंकि हम चाहते हैं कि यह केवल एक बार प्रस्तुत हो, क्योंकि मूल्य वास्तव में नहीं बदलेगा। हम केवल एक बार एपीआई कॉल करना चाहते हैं, जब यह पहली बार प्रस्तुत होता है।

फिर, बाद के रेंडर में इस मान का पुन: उपयोग किया जाएगा।

यूजमेमो का उपयोग कब एक बुरा विचार है?

हुक जितना उपयोगी है, useMemo का लगातार उपयोग करना एक अच्छा विचार नहीं है। गणनाओं को 'सेव' करने के लिए आपके द्वारा लिखे गए प्रत्येक फ़ंक्शन को useMemo के साथ लपेटना आकर्षक हो सकता है।

हालाँकि, जब इसकी आवश्यकता नहीं होती है तो इसका उपयोग करना वास्तव में आपके एप्लिकेशन को धीमा कर सकता है।

1. तुच्छ संगणना

यदि आप जिस फ़ंक्शन को यूज़मेमो के साथ लपेट रहे हैं वह एक सरल गणना है, तो यूज़मेमो का उपयोग करने की लागत अधिक परिणामी हो सकती है।

यदि आप यह निर्धारित करने में सक्षम हैं कि आपके कार्य का वजन काफी छोटा है, उदाहरण के लिए, ओ (एन) समय, तो यह निर्धारित करना उचित है कि हुक की आवश्यकता नहीं है।

2. जब आपका कार्य बाहरी राज्यों और चरों को प्रभावित कर सकता है

यदि आपके कार्य में अन्य वैश्विक चरों में संशोधन करना शामिल है, या उन पर निर्भर करता है, तो उपयोगमेमो का उपयोग करना एक अच्छा विचार नहीं हो सकता है।

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

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

UseMemo और useCallback के बीच क्या अंतर है?

आप में से कुछ उपयोग कॉलबैक से भी परिचित हो सकते हैं, जो मेमो का उपयोग करने के समान उद्देश्य को पूरा करता है। यह लेख कॉलबैक के उपयोग में गहराई से नहीं जाएगा, लेकिन हम दो कार्यों का उपयोग करने पर अंतर करेंगे।

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

ज्यादातर मामलों में, यूज़मेमो मूल्यों को याद करता है जबकि कॉलबैक कार्यों को याद करता है। जैसा कि नाम में देखा गया है, useCallback का उपयोग कॉलबैक फ़ंक्शंस को याद रखने के लिए किया जाता है, विशेष रूप से वे जो बच्चों के घटकों को सहारा के रूप में पारित किए जाते हैं। कॉलबैक फ़ंक्शन कुछ मानों या संदर्भों पर निर्भर कर सकते हैं जो ओवरटाइम बदल सकते हैं, जिसका अर्थ है कि इन फ़ंक्शंस के अपडेट के कारण उन घटकों में फिर से रेंडर होगा जो उनका उपयोग करते हैं। इसलिए, उन्हें याद रखने से री-रेंडरिंग को रोकने में मदद मिल सकती है, जिससे हमें अनुकूलन की कीमत चुकानी पड़ सकती है।

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

अंतिम विचार

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

मेमो का उपयोग करें अपने उपयोगकर्ताओं को एक ... यादगार अनुभव दें!