[रिएक्ट हुक] useState

रिएक्ट वाले इलाके में use से शुरू होने वाले नामों को बहुत पसंद किया जाता है

जैसे useServer, useCallback, useState, useMemo आदि

कस्टम हुक्स भी use से ही शुरू होते हैं

यह सब कहाँ से शुरू हुआ?

useState एक प्रसिद्ध हुक है।

यह स्टेट वैल्यू को स्टोर करता है, और जब यह बदलता है तो री-रेंडर करता है। यह बहुत ही सरल है।

यह सभी को पता है वाला उदाहरण है।

जब स्टेट वैल्यू बदलता है तो री-रेंडर होता है, लेकिन री-रेंडर का स्कोप क्या होता है?

सिर्फ p टैग? या फिर button टैग तक?

जवाब है, जहाँ useState को कॉल किया गया है, उस पूरे कंपोनेंट को।

ExampleComponent को री-रेंडर करता है, लेकिन

वर्चुअल डोम का इस्तेमाल करके वैल्यू की तुलना करके केवल जरूरी जगहों पर DOM को अपडेट करता है।

useState हर री-रेंडर पर कॉल होता है, तो वैल्यू कैसे मेन्टेन रहती है?

इसका जवाब useState के स्ट्रक्चर से मिलता है।

यह कोड रिएक्ट के useState का असली कोड है।

यह ग्लोबल ऑब्जेक्ट से dispatcher को लेता है और useState को कॉल करता है।

इससे स्ट्रक्चर समझ में नहीं आता है।

अगर हम इसे और डीप में देखें तो हमें यह कोड मिलेगा।

hook को लेता है और set फंक्शन को hook के queue से bind करके देता है।

(bind एक मौजूदा फंक्शन में this को बाइंड करता है, और बाकी आर्गुमेंट्स उस फंक्शन के आर्गुमेंट्स के तौर पर दिए जाते हैं, और फिर this को बाइंड करके एक नया फंक्शन रिटर्न करता है)

इससे कारण समझना मुश्किल है।

आगे बढ़ते हैं

हम देख सकते हैं कि हर बार init वैल्यू को असाइन किया जा रहा है। इससे स्टेट का मेन्टेन होना समझ में नहीं आता है।

आगे बढ़ते हैं। hook कुछ संदिग्ध लग रहा है।

currentlyRenderingFiber और workInProgressHook ग्लोबल वेरिएबल हैं।

यह दाएँ से बाएँ असाइनमेंट का उपयोग करके लिंक्ड लिस्ट बना रहा है।

इसलिए, हुक का स्ट्रक्चर कुछ इस तरह से होगा।

यह हेड में वैल्यू को जोड़ता जा रहा है।

अभी भी समझ में नहीं आ रहा है, इसलिए मैंने दूसरे useState इम्प्लीमेंटेशन को देखा।

सभी mountState को कॉल नहीं कर रहे थे, और री-रेंडर होने पर updateState और rerenderState को कॉल कर रहे थे।

इसलिए, स्ट्रक्चर ऊपर वाला ही है, और इवेंट के आधार पर अलग-अलग फंक्शन कॉल होते हैं।

अगर आप कोड को खुद देखना चाहते हैं तो react/packages/react-reconciler/src/ReactFiberHooks.js देख सकते हैं।