React Hook तत्त्वे
प्रत्येक गोष्टीसाठी useEffect वापरणे थांबवा. अनेक डेव्हलपर्स या हुकचा चुकीचा वापर करतात. यामुळे बग्स (bugs) निर्माण होतात आणि कोड वाचणे कठीण होते.
useEffect चा वापर मर्यादित करा.
एका पेजसाठी एक useEffect वापरण्याचा प्रयत्न करा. एकाच स्टेटसाठी (state) अनेक हुक्स वापरल्यामुळे गोंधळ निर्माण होतो. कोणता हुक कोणता स्टेट अपडेट करतोय, याचा मागोवा घेणे कठीण जाते.
युजर इव्हेंट्ससाठी (user events) useEffect वापरणे थांबवा.
क्लिक्स किंवा टॅप्ससाठी useEffect वापरू नका. त्याऐवजी इव्हेंट हँडलर्सचा (event handlers) वापर करा.
- वाईट: क्लिकनंतर स्टेट अपडेट करण्यासाठी useEffect वापरणे.
- चांगले: स्टेट अपडेट करण्यासाठी onClickBar सारख्या फंक्शनचा वापर करा.
तुम्हाला माहित असणे आवश्यक असलेले इव्हेंट प्रकार:
- पेज नेव्हिगेशन आणि इनिशियल रेंडर्स (initial renders).
- नेटवर्क कनेक्शनमधील बदल.
- WebSocket किंवा रिअल-टाइम सर्व्हर अपडेट्स.
क्लिक्ससारख्या युजर ॲक्शन्स useEffect मध्ये नसाव्यात. या ॲक्शन्ससाठी थेट इव्हेंट हँडलर्सचा वापर करा.
प्रॉप्सच्या (props) आधारे कंपोनंट्स विभाजित करा.
जर तुम्ही लॉजिक बदलण्यासाठी boolean prop वापरत असाल, तर तुमचा कंपोनंट विभाजित करा. डेटा तयार करणे (creating) आणि अपडेट करणे (updating) या दोन्ही गोष्टी हाताळणारा एकच कंपोनंट बनवू नका.
अनेक "if" स्टेटमेंट्स असलेला एकच कंपोनंट खूप मोठा होत जातो. यामुळे ॲप मेंटेन करणे कठीण होते.
- वाईट: "isAdd" प्रॉप असलेला एकच कंपोनंट जो फॉर्म फील्ड्स बदलतो.
- चांगले: "RegisterComponent" आणि "UpdateComponent" तयार करा.
लहान कंपोनंट्स टेस्ट करणे सोपे असते. ते वेगाने चालतात आणि स्वच्छ (clean) राहतात.
स्रोत: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31