कार्यात्मक घटकों में प्रॉप्स के रूप में कॉलबैक पास करने में प्रतिक्रिया प्रदर्शन समस्याएँ

प्रतिक्रिया दस्तावेज़

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

प्रतिक्रिया दस्तावेज़:-

इस सिंटैक्स के साथ समस्या यह है कि हर बार लॉगिंगबटन प्रस्तुत होने पर एक अलग कॉलबैक बनाया जाता है। ज्यादातर मामलों में, यह ठीक है। हालाँकि, यदि यह कॉलबैक निचले घटकों के लिए एक प्रस्ताव के रूप में पारित किया जाता है, तो वे घटक अतिरिक्त पुन: प्रतिपादन कर सकते हैं। हम आम तौर पर इस तरह की प्रदर्शन समस्या से बचने के लिए कंस्ट्रक्टर में बाइंडिंग या क्लास फील्ड सिंटैक्स का उपयोग करने की सलाह देते हैं।

वर्ग आधारित घटक के लिए यह ठीक है, कार्यात्मक घटक के बारे में क्या।

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

मेरे पास 3 भिन्न प्रकार हैं

const LoggingButtion = (props)=>{
 const [ loggedStatus, setLogStatus] = useState(false);

const handleClick =()=> {
    console.log('Button Clicked');
   setLogStatus(true)
  }
 return (
      <button onClick={() => { console.log('button clicked'); setLogStatus(false)} > // Type1
      <button onClick={() => handleClick()}> // type 2
      <button onClick={handleClick}> // type 3
        Click me
      </button>
    );
}