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

बहुतेक डेव्हलपर्स React कसे रेंडर (render) होते हे न समजूनच hooks शिकतात. यामुळे गोंधळ निर्माण होतो. Hooks मध्ये मास्टर होण्यासाठी, तुम्हाला पाच मुख्य जबाबदाऱ्या समजून घेणे आवश्यक आहे:

• डेटा लक्षात ठेवणे (Remembering data) • side effects कार्यान्वित करणे (Executing side effects) • डेटा शेअर करणे (Sharing data) • रेंडरिंग ऑप्टिमाइझ करणे (Optimizing rendering) • शेड्यूलिंग नियंत्रित करणे (Controlling scheduling)

State मधील बदल re-renders ट्रिगर करतात. प्रत्येक re-render मध्ये variables, objects आणि functions पुन्हा तयार होतात. याच साध्या तथ्यामुळे useMemo आणि useCallback का अस्तित्वात आहेत हे स्पष्ट होते.

Understanding the Hooks

State आणि Ordering React, component Fiber ला जोडलेल्या linked list मध्ये state साठवते. म्हणूनच तुम्ही conditions किंवा loops मध्ये hooks कॉल करू शकत नाही. योग्य state शोधण्यासाठी React कॉल्सच्या क्रमावर (order) अवलंबून असते.

The Batching Reality जेव्हा तुम्ही setState कॉल करता, तेव्हा React अपडेट शेड्यूल करते. ते मूल्य (value) लगेच बदलत नाही. म्हणूनच state सेट केल्याबरोबर लगेच log केल्यास जुने मूल्य दिसते. stale data टाळण्यासाठी नेहमी functional update pattern वापरा:

The useEffect Mental Model useEffect ला lifecycle method सारखे वागवणे थांबवा. तुमच्या component ला APIs किंवा WebSockets सारख्या बाह्य प्रणालींशी (external systems) सिंक्रोनाइझ करण्यासाठी याचा वापर करा.

महत्त्वाचे: useEffect चालण्यापूर्वी React स्क्रीन पेंट करते. यामुळे तुमचा effect UI ला ब्लॉक करणार नाही याची खात्री मिळते. जर तुम्हाला युजरला दिसण्यापूर्वी DOM मोजण्याची (measure करण्याची) गरज असेल, तर useLayoutEffect वापरा.

The useRef Reality Ref फक्त DOM elements साठी नाही. ते एक persistent mutable container आहे. React रेंडर्स दरम्यान एकच object reference ठेवते. ref.current बदलल्याने re-render ट्रिगर होत नाही. याचा वापर timers, sockets किंवा मागील (previous) मूल्यांसाठी करा.

The Memoization Trap useMemo हे वेगासाठी कोणतेही मॅजिक बटण नाही. त्याचा एक overhead cost असतो. React ला cache साठवावे लागते आणि dependencies ची तुलना करावी लागते.

जर calculation चा खर्च memoization च्या खर्चापेक्षा जास्त असेल तरच useMemo वापरा. जर तुम्ही ते साध्या गणिती क्रियांसाठी वापरले, तर तुम्ही तुमचे app अधिक संथ (slow) करता.

Context is not State Management Context हे dependency injection साठी आहे. ते तुम्हाला prop drilling टाळण्यास मदत करते. तथापि, जेव्हा Context मूल्य बदलते, तेव्हा प्रत्येक consumer re-render होतो. तुमचा संपूर्ण global state एकाच provider मध्ये ठेवू नका. तुमच्या contexts ला त्यांच्या उद्देशानुसार विभागून घ्या.

प्रगत पॅटर्न • useReducer: अनेक useState कॉल्स वापरण्याऐवजी जटिल state machines साठी याचा वापर करा. • startTransition: जड अपडेट्स दरम्यान तुमचे UI रिस्पॉन्सिव्ह ठेवण्यासाठी याचा वापर करा. • useDeferredValue: युजर टाईप करत असताना जास्त रिसोर्स घेणारे UI अपडेट्स लांबणीवर टाकण्यासाठी याचा वापर करा.

लॉजिक custom hooks मध्ये हलवून स्वच्छ कोड लिहा. १२०० ओळींचा एक component मेंटेन करणे कठीण असते. पाच लहान, लॉजिक हाताळणारे hooks स्केल करणे सोपे असते.

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