𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀

अधिकांश डेवलपर्स React के रेंडरिंग (rendering) तरीके को समझे बिना hooks सीख लेते हैं। इससे भ्रम पैदा होता है। Hooks में महारत हासिल करने के लिए, आपको पांच मुख्य जिम्मेदारियों को समझना होगा:

• डेटा को याद रखना (Remembering data) • side effects को निष्पादित करना • डेटा साझा करना • रेंडरिंग को ऑप्टिमाइज़ करना • शेड्यूलिंग को नियंत्रित करना

State में बदलाव re-renders को ट्रिगर करते हैं। हर re-render वेरिएबल्स, ऑब्जेक्ट्स और फंक्शन्स को फिर से बनाता है। यही सरल तथ्य बताता है कि useMemo और useCallback क्यों मौजूद हैं।

Hooks को समझना

State और Ordering React, state को component Fiber से जुड़ी एक linked list में स्टोर करता है। यही कारण है कि आप conditions या loops के अंदर hooks को कॉल नहीं कर सकते। React सही state खोजने के लिए calls के क्रम (order) पर निर्भर करता है।

Batching की वास्तविकता जब आप setState को कॉल करते हैं, तो React एक update शेड्यूल करता है। यह तुरंत वैल्यू नहीं बदलता है। यही कारण है कि state सेट करने के तुरंत बाद उसे log करने पर पुरानी वैल्यू दिखाई देती है। stale data से बचने के लिए हमेशा functional update pattern का उपयोग करें:

useEffect का मेंटल मॉडल (Mental Model) useEffect को lifecycle method की तरह मानना बंद करें। इसका उपयोग अपने component को APIs या WebSockets जैसे बाहरी सिस्टम के साथ सिंक (synchronize) करने के लिए करें।

महत्वपूर्ण: useEffect चलने से पहले React स्क्रीन को पेंट (paint) करता है। यह सुनिश्चित करता है कि आपका effect UI को ब्लॉक न करे। यदि आपको यूजर के देखने से पहले DOM को मापने की आवश्यकता है, तो useLayoutEffect का उपयोग करें।

useRef की वास्तविकता एक ref केवल DOM elements के लिए नहीं है। यह एक persistent mutable container है। React renders के बीच एक ही object reference बनाए रखता है। ref.current को बदलने से re-render ट्रिगर नहीं होता है। इसका उपयोग timers, sockets, या पिछली values के लिए करें।

Memoization का जाल useMemo स्पीड के लिए कोई जादुई बटन नहीं है। इसकी एक overhead cost होती है। React को cache स्टोर करना पड़ता है और dependencies की तुलना करनी पड़ती है।

useMemo का उपयोग तभी करें जब calculation की लागत memoization की लागत से अधिक हो। यदि आप इसका उपयोग साधारण गणित (simple math) के लिए करते हैं, तो आप अपने ऐप को धीमा कर देते हैं।

Context, State Management नहीं है Context, dependency injection के लिए है। यह आपको prop drilling से बचने में मदद करता है। हालाँकि, जब Context की वैल्यू बदलती है, तो हर consumer re-render होता है। अपने पूरे global state को एक ही provider में न रखें। अपने contexts को उनके उद्देश्य के अनुसार विभाजित करें।

उन्नत पैटर्न • useReducer: कई useState कॉल्स के बजाय जटिल स्टेट मशीनों के लिए इसका उपयोग करें। • startTransition: भारी अपडेट के दौरान अपने UI को रिस्पॉन्सिव बनाए रखने के लिए इसका उपयोग करें। • useDeferredValue: यूजर के टाइप करते समय महंगे UI अपडेट्स में देरी करने के लिए इसका उपयोग करें।

लॉजिक को कस्टम हुक्स में ले जाकर साफ-सुथरा कोड लिखें। 1200 लाइनों वाला एक कंपोनेंट मेंटेन करना कठिन होता है। पांच छोटे, लॉजिक संभालने वाले हुक्स को स्केल करना आसान होता है।

स्रोत: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l