यूज़इफ़ेक्ट, यूज़लेआउटइफ़ेक्ट, और यूज़इफ़ेक्टइवेंट: रिएक्ट में डेटा फ़ेचिंग हुक की तुलना

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

यूज़इफ़ेक्ट हुक

उपयोगप्रभाव हुक एक है रिएक्ट में मौलिक हुक जो आपको DOM हेरफेर, एसिंक्रोनस ऑपरेशंस और जैसे साइड इफेक्ट्स निष्पादित करने की अनुमति देता है कार्यात्मक घटकों में डेटा प्राप्त करना. यह हुक एक फ़ंक्शन है जो दो तर्क लेता है, प्रभाव फ़ंक्शन और निर्भरता सरणी।

प्रभाव फ़ंक्शन में वह कोड होता है जो साइड इफेक्ट करता है, और निर्भरता सरणी निर्धारित करती है कि प्रभाव फ़ंक्शन कब चलता है। यदि निर्भरता सरणी खाली है, तो प्रभाव फ़ंक्शन घटक के प्रारंभिक रेंडर पर केवल एक बार चलता है। अन्यथा, जब भी निर्भरता सरणी में कोई भी मान बदलता है तो प्रभाव फ़ंक्शन चलता है।

डेटा लाने के लिए यूज़इफ़ेक्ट हुक का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

यह कोड एक प्रदर्शित करता है अनुप्रयोग घटक जो यूज़इफ़ेक्ट हुक का उपयोग करके बाहरी एपीआई से डेटा प्राप्त करता है। यूज़इफ़ेक्ट का प्रभाव फ़ंक्शन JSONPlacefolder API से नमूना डेटा प्राप्त करता है। इसके बाद यह JSON प्रतिक्रिया को पार्स करता है और पुनर्प्राप्त डेटा को सेट करता है डेटा राज्य।

डेटा स्थिति के साथ, ऐप घटक प्रस्तुत करता है शीर्षक राज्य में प्रत्येक वस्तु की संपत्ति।

इफ़ेक्ट हुक के उपयोग की विशेषताएँ

• अतुल्यकालिक अनुकूल: यह मूल रूप से अतुल्यकालिक संचालन का समर्थन करता है, जिससे डेटा प्राप्त करना सुविधाजनक हो जाता है।
• प्रतिपादन के बाद चलता है: एप्लिकेशन द्वारा घटक को प्रस्तुत करने के बाद यूज़इफेक्ट हुक अपने प्रभावों को निष्पादित करता है, यह सुनिश्चित करते हुए कि हुक यूआई को अवरुद्ध नहीं करता है।
• साफ - सफाई: यह किसी फ़ंक्शन को वापस करके सफ़ाई करने का एक एकीकृत तरीका प्रदान करता है। श्रोताओं या सब्सक्रिप्शन के साथ काम करते समय यह विशेष रूप से उपयोगी हो सकता है।

यूज़लेआउटइफ़ेक्ट हुक

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

नीचे एक उदाहरण दिया गया है कि a की चौड़ाई बदलने के लिए useLayoutEffect हुक का उपयोग कैसे करें बटन तत्व:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

उपरोक्त कोड ब्लॉक, useLayoutEffect हुक का उपयोग करके बटन तत्व की चौड़ाई को 12 पिक्सेल तक बढ़ा देता है। यह सुनिश्चित करता है कि आपकी स्क्रीन पर बटन प्रदर्शित होने से पहले बटन की चौड़ाई बढ़ जाती है।

लेआउटइफेक्ट हुक के उपयोग की विशेषताएं

• एक समय का: यह समकालिक रूप से निष्पादित होता है, यदि इसके भीतर ऑपरेशन भारी है तो संभावित रूप से यूआई को अवरुद्ध कर देता है।
• DOM पढ़ें/लिखें: यह सीधे DOM पर पढ़ने और लिखने के लिए सबसे उपयुक्त है, खासकर यदि आपको ब्राउज़र को फिर से रंगने से पहले परिवर्तनों की आवश्यकता है।

यूज़इफ़ेक्टइवेंट हुक

उपयोगइफेक्टइवेंट हुक एक रिएक्ट हुक है जो निर्भरता की समस्याओं को हल करता है उपयोगप्रभाव अंकुश। यदि आप यूज़इफ़ेक्ट से परिचित हैं, तो आप जानते हैं कि इसकी निर्भरता सरणी मुश्किल हो सकती है। कभी-कभी, आपको निर्भरता सरणी में अधिक मान डालने होंगे जो अत्यंत आवश्यक हैं।

उदाहरण के लिए:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

यह कोड दर्शाता है अनुप्रयोग वह घटक जो किसी बाहरी सेवा से कनेक्शन का प्रबंधन करता है। जोड़ना फ़ंक्शन एक निर्दिष्ट URL से कनेक्ट होता है, जबकि लॉगकनेक्शन फ़ंक्शन कनेक्शन विवरण लॉग करता है। अंत में, ऑनकनेक्टेड फ़ंक्शन कॉल करता है लॉगकनेक्शन डिवाइस कनेक्ट होने पर एक सफल कनेक्शन संदेश लॉग करने का फ़ंक्शन।

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

निर्भरता सरणी में है यूआरएल परिवर्तनशील और ऑनकनेक्टेड समारोह। ऐप घटक प्रत्येक रेंडर पर ऑनकनेक्टेड फ़ंक्शन बनाएगा। इससे यूज़इफ़ेक्ट फ़ंक्शन लूप पर चलने लगेगा, जो ऐप घटक को फिर से प्रस्तुत करना जारी रखेगा।

यूज़इफ़ेक्ट लूप समस्या को हल करने के कई तरीके हैं। फिर भी, आपकी निर्भरता सरणी में अधिक अनावश्यक मान जोड़े बिना इसे करने का सबसे प्रभावी तरीका यूज़इफेक्टइवेंट हुक है।

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

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

यूज़इफ़ेक्टइवेंट हुक तब उपयोगी होता है जब आप चाहते हैं कि आपका यूज़इफ़ेक्ट किसी विशिष्ट मान पर निर्भर हो, भले ही प्रभाव एक ऐसी घटना को ट्रिगर करता है जिसके लिए अन्य मानों की आवश्यकता होती है जिन्हें आप निर्भरता के रूप में उपयोग नहीं करना चाहते हैं उपयोगप्रभाव.

यूज़इफ़ेक्टइवेंट हुक की विशेषताएं

• यह घटना-संचालित दुष्प्रभावों के लिए सबसे उपयुक्त है।
• उपयोगइफेक्टइवेंट हुक जैसे इवेंट हैंडलर के साथ काम नहीं करता है क्लिक पर, परिवर्तन पर, वगैरह।

यूज़इफ़ेक्टइवेंट हुक अभी भी प्रायोगिक और अनुपलब्ध है प्रतिक्रिया संस्करण 18 हुक.

कब किस हुक का उपयोग करें?

उपरोक्त प्रत्येक डेटा फ़ेचिंग हुक विभिन्न स्थितियों के लिए उपयुक्त है:

• डेटा लाया जा रहा है: यूज़इफ़ेक्ट एक उत्कृष्ट विकल्प है।
• प्रत्यक्ष DOM जोड़-तोड़: यदि आपको दोबारा पेंट करने से पहले DOM में समकालिक परिवर्तन करने की आवश्यकता है, तो useLayoutEffect का विकल्प चुनें।
• हल्के संचालन: उन परिचालनों के लिए जो यूआई को अवरुद्ध करने का जोखिम नहीं उठाते हैं, आप स्वतंत्र रूप से यूज़इफेक्ट का उपयोग कर सकते हैं।
• घटना-संचालित दुष्प्रभाव: इवेंट को रैप करने के लिए यूज़इफेक्टइवेंट हुक का उपयोग करें और साइड इफेक्ट्स को चलाने के लिए यूज़इफेक्ट हुक का उपयोग करें।

दुष्प्रभावों को कुशलतापूर्वक संभालें

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