useImperativeHandle: कस्टम Instance Values

जब आप रेफ़ को सीधे DOM तत्व पर आगे भेजते हैं, तो पैरेंट को वह मूल DOM नोड प्राप्त होता है और उस पर मौजूद हर मूल विधि तथा प्रॉपर्टी तक पहुँच मिल जाती है। अक्सर यह आपकी इच्छित सार्वजनिक पहुँच से कहीं अधिक होती है।

कभी-कभी आप पैरेंट को पूरे DOM नोड के बजाय एक छोटा, चुना हुआ ऑब्जेक्ट देना पसंद करेंगे, ताकि अपने घटक का सार्वजनिक API जानबूझकर सीमित रखा जा सके।

useImperativeHandle आपको यह अनुकूलित करने देता है कि पैरेंट का रेफ़ किस मान की ओर संकेत करे। DOM नोड के बजाय पैरेंट को आपके द्वारा लौटाया गया ऑब्जेक्ट प्राप्त होता है, इसलिए आप तय करते हैं कि कौन-सी विधियाँ और मान उजागर किए जाएँ।

इससे आगे भेजा गया रेफ़ अंतर्निहित तत्व तक पहुँच देने वाले अनियंत्रित माध्यम के बजाय एक परिभाषित निर्देशात्मक इंटरफ़ेस बन जाता है।

यह हुक आगे भेजे गए रेफ़ को पहला आर्ग्युमेंट और फ़ैक्टरी फ़ंक्शन को दूसरा आर्ग्युमेंट लेता है। फ़ैक्टरी वह हैंडल ऑब्जेक्ट लौटाती है जो पैरेंट में ref.current बन जाता है।

इसे useImperativeHandle(ref, () => ({ ... })) के रूप में कॉल किया जाता है। फ़ैक्टरी के भीतर उन विधियों और मानों का ऑब्जेक्ट बनाया जाता है जिन्हें आप उपलब्ध कराना चाहते हैं।

एक सामान्य तरीका ऐसा कस्टम इनपुट बनाना है जो केवल focus और clear उपलब्ध कराए। फ़ैक्टरी के भीतर आप इन दोनों विधियों वाला ऑब्जेक्ट लौटाते हैं और दोनों विधियाँ वास्तविक input के आंतरिक रेफ़ पर काम करती हैं।

अब पैरेंट फ़ील्ड पर फ़ोकस कर सकता है या उसे साफ़ कर सकता है, लेकिन उसका मूल मान एट्रिब्यूट पढ़ या मनमाना DOM व्यवहार शुरू नहीं कर सकता। इससे उपयोग पूर्वानुमानित रहता है।

निर्देशात्मक हैंडल डायलॉग के लिए बहुत उपयुक्त होते हैं। Modal घटक open और close विधियाँ उजागर कर सकता है, जो उसकी आंतरिक दृश्यता स्थिति बदलती हैं। इससे पैरेंट स्वयं open बूलियन सँभाले बिना उसे निर्देशात्मक रूप से नियंत्रित कर सकता है।

यह ऐसे कोड के लिए सुविधाजनक है जिसे कई स्थानों से डायलॉग शुरू करना हो, जैसे किसी एसिंक्रोनस क्रिया के पूरा होने के बाद पुष्टि दिखाना।

केवल उन्हीं विधियों को लौटाकर जिन्हें आप समर्थन देना चाहते हैं, आप एक स्पष्ट अनुबंध बनाते हैं। उपभोक्ता विस्तृत DOM API के बजाय छोटे, दस्तावेज़ीकृत संचालन-समुच्चय पर निर्भर करते हैं, जिससे भविष्य में कोड को दोबारा व्यवस्थित करना अधिक सुरक्षित होता है।

सीमित निर्देशात्मक इंटरफ़ेस का परीक्षण करना और उसके बारे में तर्क करना आसान होता है, और आंतरिक कार्यान्वयन बदलने पर इसके टूटने की संभावना भी बहुत कम होती है।

useImperativeHandle एक वैकल्पिक तीसरा आर्ग्युमेंट, निर्भरता सारणी, स्वीकार करता है। जब कोई निर्भरता बदलती है, तो फ़ैक्टरी फिर से चलती है और हैंडल ऑब्जेक्ट दोबारा बनाया जाता है, ठीक वैसे ही जैसे useMemo और useEffect में होता है।

यदि आपके द्वारा उजागर की गई विधियाँ बदल सकने वाले मानों को अपने भीतर कैद करती हैं, तो उन मानों को निर्भरता के रूप में सूचीबद्ध करें, ताकि पैरेंट को हमेशा वर्तमान स्थिति से जुड़ा हैंडल मिले।

useImperativeHandle का अर्थ केवल forwardRef से रैप किए गए घटक के भीतर ही बनता है, क्योंकि कस्टम हैंडल जोड़ने के लिए उसे आगे भेजे गए रेफ़ की आवश्यकता होती है। अपने-आप में ऐसा कोई पैरेंट रेफ़ नहीं होगा जिसे भरा जा सके।

इसलिए दोनों का साथ में उपयोग किया जाता है: forwardRef रेफ़ को भीतर लाता है और useImperativeHandle यह तय करता है कि अंततः वह रेफ़ किसकी ओर संकेत करेगा।

किसी हैंडल का परीक्षण करने के लिए आप घटक को रेफ़ के साथ रेंडर करते हैं, फिर act ब्लॉक के भीतर ref.current के माध्यम से विधियाँ चलाते हैं और परिणामी व्यवहार या DOM में हुए बदलावों पर दावा जाँचते हैं।

क्योंकि उजागर किया गया इंटरफ़ेस छोटा और स्पष्ट होता है, ये परीक्षण केंद्रित रहते हैं। वे आंतरिक विवरणों को टटोलने के बजाय यह जाँचते हैं कि प्रत्येक दस्तावेज़ीकृत विधि अपने अनुबंध के अनुसार काम करती है।

TypeScript में आप हैंडल का वर्णन करने वाला एक इंटरफ़ेस परिभाषित करते हैं, जैसे focus और clear विधियों वाला इंटरफ़ेस, फिर उसका उपयोग forwardRef जेनरिक और पैरेंट के पास मौजूद रेफ़, दोनों का प्रकार निर्धारित करने के लिए करते हैं।

इससे कॉल किए जाने वाले स्थान पर स्वतः-पूर्णता और संकलन-समय जाँच मिलती है। उपभोक्ताओं को ठीक-ठीक दिखाई देता है कि कौन-सी विधियाँ मौजूद हैं और गलत उपयोग रनटाइम से पहले पकड़ लिया जाता है।

useImperativeHandle यह अनुकूलित करता है कि आगे भेजा गया रेफ़ क्या उजागर करे। यह रेफ़ और एक ऐसी फ़ैक्टरी लेता है जो हैंडल ऑब्जेक्ट लौटाती है। इसका उपयोग focus और clear जैसी छोटी API या Modal पर open और close जैसी विधियाँ उपलब्ध कराने के लिए किया जाता है।

इसे हमेशा forwardRef के साथ जोड़ा जाता है, हैंडल को ताज़ा करने के लिए निर्भरता सारणी का समर्थन करता है और TypeScript इंटरफ़ेस तथा केंद्रित परीक्षणों के साथ अच्छी तरह काम करता है। सीमित इंटरफ़ेस जानबूझकर चुना गया और अच्छा डिज़ाइन है।