आपने यह बहुत बार सुना होगा कि घटकों के बेकार पुन: प्रतिपादन को रोकने के लिए हमें useCallback() का उपयोग करके कॉलबैक फ़ंक्शन को याद रखना चाहिए ।

लेकिन वास्तव में useCallback() क्या है । क्या आपने कभी इसके बारे में सोचा है?

आइए मैं आपको यह समझने में मदद करता हूं कि यह क्या है और इसका सही उपयोग कहां करना है।

आइए पहले फ़ंक्शन समानता जांच को समझें

यह देखने से पहले कि हम इसका उपयोग कैसे करते हैं, आइए देखें कि यह क्या हल करता है। आइए एक साधारण फ़ंक्शन लिखें जो एक फ़ंक्शन देता है:

mul1 और mul2 ऐसे कार्य हैं जो दो संख्याओं को गुणा करते हैं। वे गुणा समारोह द्वारा बनाए गए हैं ।

जावास्क्रिप्ट में कार्य नियमित वस्तु हैं। फ़ंक्शन mul1 और mul2 समान कोड साझा करते हैं लेकिन वे अलग-अलग फ़ंक्शन ऑब्जेक्ट हैं। उनकी तुलना false से मूल्यांकन करें ।

ठीक इसी तरह से JavaScript ऑब्जेक्ट काम करते हैं। एक वस्तु (फ़ंक्शन ऑब्जेक्ट सहित) केवल स्वयं के बराबर होती है।

अब उपयोग का उद्देश्य कॉलबैक ()

React.useCallback() मूल रूप से ऊपर देखे गए फंक्शन समानता जांच को हल करता है। समान कोड साझा करने वाले विभिन्न फ़ंक्शन ऑब्जेक्ट अक्सर रिएक्ट घटकों के अंदर बनाए जाते हैं:

हैंडलक्लिक (इनलाइन फ़ंक्शन) CustomComponent के प्रत्येक प्रतिपादन पर एक अलग फ़ंक्शन ऑब्जेक्ट है ।

और रिएक्ट कंपोनेंट्स के साथ इनलाइन घोषित किए गए कार्यों को करने में कोई बुराई नहीं है। इसका प्रदर्शन पर हानिकारक प्रभाव नहीं पड़ेगा।

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

1. जैसे कि जब फ़ंक्शन में कुछ आंतरिक स्थिति होती है, उदाहरण के लिए जब फ़ंक्शन का खंडन/थ्रॉटल किया जाता है

2. अंदर लिपटे एक कार्यात्मक घटक React.memo()एक फ़ंक्शन ऑब्जेक्ट प्रोप को स्वीकार करता है।

यदि कोई चाइल्ड कंपोनेंट जो कॉलबैक स्वीकार करता है, रेफरेंशियल इक्वलिटी चेक (जैसे: React.memo() या shouldComponentUpdate() ) पर निर्भर करता है, ताकि उसके प्रॉप्स में बदलाव होने पर अनावश्यक री-रेंडर को रोका जा सके, तो यह महत्वपूर्ण है कि कोई भी कॉलबैक प्रॉप्स बीच में न बदले। प्रस्तुत करता है।

इसलिए मूल घटक में, हम कॉलबैक प्रोप को useCallback() में लपेट सकते हैं और गारंटी दे सकते हैं कि यह उसी फ़ंक्शन ऑब्जेक्ट को अनुकूलित चाइल्ड कंपोनेंट में पास कर रहा है।

3. जब फ़ंक्शन ऑब्जेक्ट अन्य हुक पर निर्भरता है, उदाहरण के लिए useEffect(..., [callback])

उपरोक्त उदाहरण में, यदि myFunction कुछ ऐसा करता है जो MyComponent को फिर से बनाने का कारण बनता है (उदाहरण के लिए यदि यह या तो कुछ ऐसा करता है जो प्रॉप्स या राज्य को बदलता है) तो आपको एक अनंत लूप स्थिति में ले जाएगा।

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

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

आशा है कि इससे आपको वास्तव में उपयोग कॉलबैक () को समझने में मदद मिली ! 😊

इस आलेख को पढ़ने के लिए धन्यवाद। यदि आपने इसका आनंद लिया है, तो कृपया बेझिझक बटन पर क्लिक करें ताकि दूसरों को इसे खोजने में मदद मिल सके।