रिएक्ट का useState हुक घटक के स्थिति मान को संग्रहीत करने और परिवर्तन होने पर UI को अपडेट करने के लिए री-रेंडरिंग का उपयोग करने के लिए उपयोग किया जाता है।
useState पूरे घटक को री-रेंडर करता है, लेकिन वर्चुअल DOM का उपयोग करके वास्तविक DOM परिवर्तन को कम करता है।
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 देख सकते हैं।