क्या मुझे घटक में एक या कई उपयोग करना चाहिए?

Question 1

मुझे लागू करने के लिए कुछ दुष्प्रभाव हैं और उन्हें व्यवस्थित करने के तरीके जानना चाहते हैं:

एक एकल उपयोग के रूप में
या कई उपयोग

प्रदर्शन और वास्तुकला के मामले में बेहतर क्या है?

Question 2

जिस पैटर्न का आपको पालन करने की आवश्यकता है, वह आपके उपयोग के आधार पर निर्भर करता है।

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

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

दूसरा: एक ऐसा मामला हो सकता है, जब आपको किसी सेट या किसी प्रॉप के बीच परिवर्तन होने पर एपीआई कॉल या किसी अन्य साइड-इफ़ेक्ट को ट्रिगर करने की आवश्यकता होती है। ऐसे मामले में useEffectनिगरानी के लिए प्रासंगिक मूल्यों के साथ एक अच्छा विचार होना चाहिए

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

तीसरा: एक तीसरा मामला जब आपको विभिन्न मूल्यों के परिवर्तन पर अलग-अलग कार्रवाई करने की आवश्यकता होती है। ऐसे मामले में, अलग-अलग प्रासंगिक तुलनाओं को अलग-अलग करेंuseEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

Question 3

आपको प्रतिक्रियाओं के लिए कई प्रभावों का उपयोग करना चाहिए जैसा कि reactjs.org ने सुझाव दिया है। https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns