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

इस गाइड में, हम आपके रिएक्ट एप्लिकेशन में प्रदर्शन को अनुकूलित करने के कुछ सबसे प्रभावी तरीकों के बारे में बताएंगे। हम आपको बाधाओं को पहचानने और ठीक करने में मदद करने के लिए मेमोइज़ेशन, आलसी लोडिंग और रिएक्ट प्रोफाइलर जैसे टूल की मूल बातें कवर करेंगे। आएँ शुरू करें!

परिचय: आधुनिक रिएक्ट ऐप्स में प्रदर्शन क्यों मायने रखता है

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

जैसे-जैसे आपका रिएक्ट ऐप बढ़ता है, अनावश्यक रूप से घटकों को फिर से प्रस्तुत करना या एक ही बार में भारी बंडल लोड करने से प्रदर्शन धीमा हो सकता है। यही कारण है कि सुचारु, उच्च प्रदर्शन वाले अनुप्रयोगों के निर्माण के लिए प्रतिक्रिया प्रदर्शन अनुकूलन तकनीक सीखना महत्वपूर्ण है।

प्रतिक्रिया में संस्मरण

React.memo का उपयोग कैसे करें और मेमो का प्रभावी ढंग से उपयोग कैसे करें

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

प्रतिक्रिया.ज्ञापन

आइए React.memo से शुरू करते हैं। यदि इसके प्रॉप्स नहीं बदले हैं तो यह उच्च-क्रम घटक किसी घटक को पुन: प्रस्तुत करने से रोकता है।

उदाहरण:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

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

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

इसके बाद, यूज़मेमो है। इस हुक का उपयोग आपके कार्यात्मक घटकों के अंदर महंगी गणनाओं या मूल्यों को याद रखने के लिए किया जाता है।

उदाहरण:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

यहां, गणना तभी दोबारा चलती है जब आइटम सरणी बदलती है, प्रत्येक रेंडर पर समान परिणाम की पुनर्गणना से बचकर समय की बचत होती है।

घटकों को लोड करने में आलसीता

React.lazy के साथ लोड समय में सुधार

आलसी लोडिंग एक ऐसी तकनीक है जहां घटकों को लोड किया जाता है केवल तभी जब उनकी आवश्यकता होती है, सब कुछ पहले से लोड करने के बजाय। यह आपके एप्लिकेशन के आरंभिक लोड समय को कम करने में मदद करता है, जिससे यह तेज़ लगता है।

रिएक्ट एक अंतर्निहित फ़ंक्शन प्रदान करता है जिसे React.lazy() कहा जाता है जो आपको मांग पर घटकों को लोड करने की अनुमति देता है।

उदाहरण:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

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

प्रदर्शन की निगरानी के लिए रिएक्ट प्रोफाइलर

बाधाओं की पहचान कैसे करें

किसी ऐसी चीज़ को अनुकूलित करना कठिन है जिसे आप माप नहीं सकते। यहीं पर रिएक्ट प्रोफाइलर आता है। रिएक्ट प्रोफाइलर आपको अपने घटकों के प्रदर्शन को ट्रैक करने, धीमी रेंडरर्स की पहचान करने और री-रेंडर्स की "लागत" को मापने की अनुमति देता है।

रिएक्ट प्रोफाइलर का उपयोग करने के लिए, बस एक घटक ट्री को के साथ लपेटें और प्रदर्शन डेटा एकत्र करने के लिए कॉलबैक फ़ंक्शन प्रदान करें।

उदाहरण:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

प्रोफाइलर का उपयोग करके, आप ट्रैक कर सकते हैं कि प्रत्येक घटक को रेंडर करने में कितना समय लगता है और उन क्षेत्रों को ढूंढ सकते हैं जहां प्रदर्शन में सुधार किया जा सकता है, जैसे अनावश्यक री-रेंडर।

अन्य अनुकूलन रणनीतियाँ

कोड विभाजन, इवेंट हैंडलिंग अनुकूलन, और बहुत कुछ

मेमोइज़ेशन और आलसी लोडिंग के अलावा, आपके रिएक्ट ऐप के प्रदर्शन को बेहतर बनाने के लिए कई अन्य तकनीकें हैं:

1. कोड विभाजन: अपने ऐप को छोटे-छोटे हिस्सों में तोड़ें जिन्हें वेबपैक के कोड विभाजन सुविधा का उपयोग करके ऑन-डिमांड लोड किया जा सकता है। इससे आरंभिक बंडल का आकार कम हो जाता है.

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. इवेंट हैंडलिंग ऑप्टिमाइज़ेशन: इवेंट हैंडलर्स को याद रखने के लिए यूज़कॉलबैक हुक का उपयोग करें, जिससे उन्हें हर रेंडर पर दोबारा बनाए जाने से रोका जा सके।

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. डिबाउंसिंग और थ्रॉटलिंग: अपडेट की आवृत्ति को सीमित करने के लिए इवेंट श्रोताओं को डिबाउंसिंग या थ्रॉटल करके स्क्रॉलिंग या आकार बदलने जैसे अनुकूलन करें।

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

निष्कर्ष: इन तकनीकों के साथ उच्च-प्रदर्शन प्रतिक्रिया अनुप्रयोगों का निर्माण

तेज़ और कुशल रिएक्ट अनुप्रयोगों के निर्माण के लिए तकनीकों के संयोजन की आवश्यकता होती है। React.memo और useMemo के साथ memoization का उपयोग करके, आप अनावश्यक पुन: प्रस्तुतीकरण को रोक सकते हैं। आलसी लोडिंग React.lazy के साथ घटक आपको केवल जरूरत पड़ने पर घटकों को लाकर लोड समय में सुधार करने की अनुमति देते हैं। रिएक्ट प्रोफाइलर आपको प्रदर्शन बाधाओं की पहचान करने और उन्हें अनुकूलित करने में मदद करता है।

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

अपने रिएक्ट ऐप के प्रदर्शन को अगले स्तर पर ले जाने के लिए तैयार हैं? अपने प्रोजेक्ट में इन अनुकूलन तकनीकों को आज़माएं और अपने ऐप की गति में सुधार देखें!

यदि आपको यह लेख अच्छा लगा हो, तो मेरे काम का समर्थन करने पर विचार करें:

• मेरे लिए एक कॉफी खरीदो
• मेंटरशिप या करियर सलाह के लिए कॉल बुक करें
• ट्विटर पर मुझे फॉलो करें
• लिंक्डइन पर कनेक्ट करें