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

1. React.memo का उपयोग करके घटकों को मेमोइज़ करना

जब घटक के प्रॉप्स नहीं बदले हैं तो मेमोइज़ेशन आपको पुन: रेंडर को छोड़ने में मदद करता है। हालाँकि, कस्टम तुलना फ़ंक्शन को लागू न करके React.memo का दुरुपयोग करना आसान है।

गलत उपयोग:

const MemoizedComponent = React.memo(MyComponent);

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

सही उपयोग:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

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

2. इनलाइन फ़ंक्शंस के अत्यधिक उपयोग से बचें

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

गलत उपयोग:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

इसके कारण प्रत्येक रेंडर पर हैंडलक्लिक को फिर से बनाया जाता है, जिससे अनावश्यक री-रेंडर होता है।

सही उपयोग:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

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

3. प्योरकंपोनेंट का लाभ उठाना

क्लास घटकों के साथ काम करते समय, React.PureComponent का उपयोग यह सुनिश्चित करता है कि घटक केवल तभी पुन: प्रस्तुत होता है जब उसका प्रॉप्स या स्थिति बदल जाती है। यदि आप React.Component का उपयोग कर रहे हैं, तो इससे अनावश्यक पुन: प्रस्तुतीकरण हो सकता है।

गलत उपयोग:

class CardComponent extends React.Component {
  // Component logic
}

सही उपयोग:

class CardComponent extends React.PureComponent {
  // Component logic
}

React.PureComponent का विस्तार करके, React अनावश्यक पुन: प्रस्तुतीकरण से बचते हुए, प्रॉप्स और स्थिति की उथली तुलना करेगा।

4. कार्यात्मक घटकों में उपयोग चयनकर्ता को अनुकूलित करना

प्रतिक्रिया-रिडक्स से उपयोग चयनकर्ता का उपयोग करते समय, राज्य के केवल आवश्यक टुकड़े का चयन करना महत्वपूर्ण है।

गलत उपयोग:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

जब भी राज्य का कोई भी हिस्सा बदलता है तो यह घटक को फिर से प्रस्तुत करने का कारण बनेगा।

सही उपयोग:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

राज्य के केवल आवश्यक भाग का चयन करके, आप पुन: प्रस्तुतीकरण को कम करते हैं।

5. क्लास कंपोनेंट्स में mightComponentUpdate लागू करना

क्लास घटकों के लिए जो PureComponent का विस्तार नहीं करते हैं, मैन्युअल रूप से includeComponentUpdate को लागू करने से घटक के पुन: प्रस्तुत होने पर अधिक विस्तृत नियंत्रण की अनुमति मिलती है।

गलत उपयोग:

class ListItem extends React.Component {
  // Component logic
}

यह हर बार मूल घटक के रेंडर होने पर फिर से रेंडर होगा, भले ही प्रॉप्स और स्थिति नहीं बदली हो।

सही उपयोग:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

ShoulComponentUpdate को अनुकूलित करके, हम यह सुनिश्चित करते हैं कि घटक केवल तभी पुन: प्रस्तुत होता है जब आइटमआईडी प्रोप या मूल्य स्थिति बदलती है।

निष्कर्ष

इन तकनीकों को नियोजित करके, आप अपने रिएक्ट एप्लिकेशन में अनावश्यक री-रेंडर को काफी हद तक कम कर सकते हैं, जिससे बेहतर प्रदर्शन हो सकता है। React.memo के साथ मेमोइज़ेशन लागू करना, PureComponent का लाभ उठाना, और mightComponentUpdate को फाइन-ट्यूनिंग करना आपके React घटकों को अनुकूलित करने के लिए प्रमुख रणनीतियाँ हैं।

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

सन्दर्भ:

1. गीक्सफॉरगीक्स। (2023)। रिएक्ट में मेमोइज़ेशन क्या है?
2. सिंकफ्यूजन। (2024)। प्रतिक्रिया में संस्मरण
3. हाइग्राफ। (2024)। रिएक्ट मेमो क्या है और इसका उपयोग कैसे करें?
4. Refine.dev. (2024)। उदाहरणों के साथ रिएक्ट मेमो गाइड

यदि आपको यह मार्गदर्शिका उपयोगी लगी, तो कृपया इसे दूसरों के साथ साझा करने पर विचार करें! ?

यह ब्लॉग आधुनिक वेब विकास प्रथाओं में स्पष्टता और प्रासंगिकता के लिए सर्वोत्तम प्रथाओं को शामिल करने और परिवर्तनीय नामों को बदलने के साथ-साथ रिएक्ट अनुप्रयोगों में अनावश्यक पुन: प्रस्तुतीकरण से बचने का एक अद्यतन और व्यापक अवलोकन प्रदान करता है।

उद्धरण:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo