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

लेकिन घबराना नहीं! जैसे कॉफी जीवन की अधिकांश समस्याओं को ठीक कर सकती है (या हम ऐसा सोचना चाहेंगे), कुछ प्रमुख तकनीकें आपके रिएक्ट ऐप को टर्बोचार्ज कर सकती हैं और इसे शीर्ष गति पर वापस ला सकती हैं। आइए आपके रिएक्ट ऐप को अनुकूलित करने के 6 सरल तरीके तलाशें, ताकि यह आपके दैनिक कैफीन बूस्ट से तेज़ हो।

1. कोड-विभाजन: केवल वही लोड करना जो आपको चाहिए

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

React.lazy() और Suspense का उपयोग इसे लागू करने का एक आदर्श तरीका है:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
  );
}

यह क्यों मदद करता है: कोड-विभाजन अप्रयुक्त कोड की लोडिंग को आवश्यक होने तक स्थगित करके आपके ऐप के प्रारंभिक लोड समय को कम कर देता है। उपयोगकर्ताओं को स्क्रीन पर कुछ देखने से पहले पूरे ऐप के लोड होने का इंतजार नहीं करना पड़ेगा।

2. छवियाँ लोड करने में आलस्य: सभी स्नैक्स एक साथ लोड न करें

एक पिज़्ज़ा ऑर्डर करने और उसके बदले एक साल का किराने का सामान प्राप्त करने की कल्पना करें। हास्यास्पद लगता है, है ना? खैर, ऐसा तब होता है जब आप अपनी सभी छवियों को पहले ही लोड कर देते हैं। इसके बजाय, छवियों को आलसी-लोड करें, ताकि आप केवल वही प्राप्त कर सकें जो आवश्यक है, जैसे एक समय में एक पिज्जा ऑर्डर करना।

React-lazyload जैसी लाइब्रेरी का उपयोग करना एक त्वरित समाधान है:

import LazyLoad from 'react-lazyload';

यह क्यों मदद करता है: छवियों को धीरे-धीरे लोड करके, आप प्रारंभिक पृष्ठ लोड समय को कम करते हैं और केवल तभी छवियां डाउनलोड करते हैं जब उनकी आवश्यकता होती है - प्रदर्शन और उपयोगकर्ता अनुभव दोनों में सुधार होता है।

3. यूज़कॉलबैक और यूज़मेमो: रिएक्ट के लिए मेमोरी बूस्ट

ठीक उसी तरह जैसे आप धोने में समय बचाने के लिए उसी कॉफी मग का पुन: उपयोग करते रहते हैं, यदि आप इसकी अनुमति देते हैं तो रिएक्ट मूल्यों और कार्यों का पुन: उपयोग कर सकता है! useCallback और useMemo ऐसे हुक हैं जो आपको महंगी गणनाओं या फ़ंक्शंस को संग्रहीत करने में मदद करते हैं, इसलिए वे हर रेंडर पर पुनर्गणना नहीं करते हैं।

यूज़मेमो उदाहरण:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

कॉलबैक उदाहरण का उपयोग करें:

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

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

4. React.memo के साथ संस्मरण: अनावश्यक पुन: प्रस्तुतीकरण रोकें

क्या आपका कोई ऐसा दोस्त है जो एक ही कहानी बार-बार दोहराता है? रिएक्ट भी ऐसा ही हो सकता है—आवश्यकता न होने पर भी घटकों को पुनः प्रस्तुत करना! यहीं पर React.memo आता है, जो रिएक्ट को घटकों को फिर से प्रस्तुत करने से रोकता है जब तक कि उनके प्रॉप्स नहीं बदलते।

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

यह क्यों मदद करता है: React.memo रिएक्ट को यह बताने जैसा है, “अरे, आपने इसे पहले भी सुना है! जब तक कुछ नया न हो, अपने आप को न दोहराएं।” यह अनावश्यक पुन: प्रस्तुतीकरण से बचाता है, समय और संसाधनों की बचत करता है।

5. राज्य को कुशलतापूर्वक प्रबंधित करना: आवश्यकता पड़ने पर ही इसे उठाएं

स्टेट को ऊपर उठाना रिएक्ट में एक सामान्य पैटर्न है, लेकिन कभी-कभी हम इसे बहुत ऊपर उठाने या गलत स्थानों पर बहुत अधिक स्टेट को प्रबंधित करने के दोषी होते हैं। इससे अत्यधिक पुन: प्रस्तुतीकरण हो सकता है. जब भी संभव हो, घटकों के लिए राज्य को स्थानीय रखें, और केवल आवश्यक होने पर ही राज्य को उठाकर अनावश्यक पुन: प्रस्तुतीकरण से बचें।

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

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

6. उपयोगकर्ता इनपुट का खंडन: शांत हो जाओ, प्रतिक्रिया करो!

कल्पना करें कि कोई व्यक्ति बेतहाशा खोज बार में टाइप कर रहा है और आपका ऐप हर एक कीस्ट्रोक को संसाधित करने का प्रयास कर रहा है। बेचारी प्रतिक्रिया शायद गोलियों से पसीना बहा रही है! एंटर डिबाउंसिंग-प्रत्येक कुंजी दबाने के बजाय उपयोगकर्ता के रुकने के बाद ही इनपुट को संभालने की प्रक्रिया।

lodash.debounce का उपयोग करने से यह समस्या हल हो सकती है:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

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

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

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

पढ़ने के लिए धन्यवाद, अगर आपको पोस्ट पसंद आई हो तो कृपया इसे साझा करें और सुझाव छोड़ें।

मेरे साथ जुड़ें

वेबसाइट: हार्दिक गोहिल

जीथब: https://github.com/HardikGohilHLR

लिंक्डइन: https://www.linkedin.com/in/hardikgohilhlr

धन्यवाद ❤️