𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗸𝗲 𝗦𝗶𝗱𝗱𝗵𝗮𝗻𝘁
हर चीज़ के लिए useEffect का उपयोग करना बंद करें। कई डेवलपर्स इस hook का गलत इस्तेमाल करते हैं। इससे bugs पैदा होते हैं और code को पढ़ना मुश्किल हो जाता है।
useEffect के उपयोग को सीमित करें।
प्रति पेज एक ही useEffect का उपयोग करने का प्रयास करें। एक ही state के लिए कई hooks का उपयोग करने से भ्रम पैदा होता है। आप यह ट्रैक करना भूल जाते हैं कि कौन सा hook किस state को अपडेट कर रहा है।
यूजर इवेंट्स (user events) के लिए useEffect का उपयोग करना बंद करें।
क्लिक या टैप के लिए useEffect का उपयोग न करें। इसके बजाय event handlers का उपयोग करें।
- गलत: क्लिक के बाद state को अपडेट करने के लिए useEffect का उपयोग करना।
- सही: state को अपडेट करने के लिए onClickBar जैसा function उपयोग करें।
वे इवेंट प्रकार जिन्हें आपको जानना चाहिए:
- Page navigation और initial renders.
- Network connection में बदलाव।
- WebSocket या real-time server updates.
क्लिक जैसे यूजर एक्शन useEffect के लिए नहीं हैं। इन कार्यों के लिए सीधे event handlers का उपयोग करें।
Props के आधार पर components को विभाजित करें।
यदि आप लॉजिक बदलने के लिए boolean prop का उपयोग करते हैं, तो अपने component को विभाजित करें। एक ऐसा component न बनाएं जो डेटा बनाने (creating) और अपडेट करने (updating) दोनों को संभालता हो।
कई "if" statements वाला एक single component बहुत बड़ा हो जाता है। इससे ऐप को maintain करना मुश्किल हो जाता है।
- गलत: एक component जिसमें "isAdd" prop हो जो form fields को बदलता है।
- सही: एक "RegisterComponent" और एक "UpdateComponent" बनाएं।
छोटे components का test करना आसान होता है। वे तेज़ी से चलते हैं और clean रहते हैं।
स्रोत: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31