जेव्हा React 'Re-render' म्हणते, तेव्हा त्याचा अर्थ तीन गोष्टींचा असतो
जेव्हा तुम्ही setState कॉल करता, तेव्हा React फक्त DOM अपडेट करत नाही. ते एका क्रमाने तीन वेगळे टप्पे (phases) चालवते. बहुतेक डेव्हलपर्स या टप्प्यांमध्ये गोंधळतात. यातील फरक समजून घेतल्यास तुम्हाला परफॉर्मन्सच्या समस्या सोडवण्यास मदत होते.
The Three Phases:
• Render: React तुमच्या component function ला कॉल करते. • Reconcile: React नवीन आउटपुटची जुन्या आउटपुटशी तुलना करते. • Commit: React DOM मध्ये बदल लागू करते.
- The Render Phase
React तुमचे function चालवते. ते सध्याचे props वापरते. function JSX रिटर्न करते. हे JSX म्हणजे केवळ JavaScript objects ची एक यादी आहे. लोक याला virtual DOM म्हणतात. हा खरा DOM नाही. UI कसे दिसले पाहिजे याचे हे एक वर्णन आहे. स्क्रीनवर अजून काहीही दिसत नाही. हा टप्पा पूर्णपणे गणित आणि लॉजिकवर आधारित आहे.
- The Reconcile Phase
React जुने tree आणि नवीन tree दोन्ही जवळ ठेवते. ते त्यांच्यातील फरक शोधते. जर element type बदलला, तर React संपूर्ण tree बदलून टाकते. जर फक्त props बदलले, तर React त्यांना अपडेट करते. इथेच keys महत्त्वाच्या ठरतात. Keys मुळे React ला लिस्ट मधील आयटम्स त्यांच्या स्थानाऐवजी (position) त्यांच्या ओळखीनुसार (identity) मॅच करण्यास मदत होते. हा टप्पा DOM अपडेट करण्यासाठी आवश्यक असलेल्या किमान स्टेप्सची एक यादी तयार करतो.
- The Commit Phase
React बदलांची यादी घेते आणि प्रत्यक्ष (real) DOM मध्ये बदल करते. ते नवीन nodes तयार करते आणि जुने काढून टाकते. जेव्हा युजर्सना स्क्रीनवर बदल दिसतात, तेव्हा हा टप्पा घडत असतो. यानंतर, ब्राउझर स्क्रीन पेंट करतो. त्यानंतर, useEffect रन होते.
Common Misconceptions:
• Re-render मुळे नेहमीच DOM बदलत नाही. जर आउटपुट सारखेच असेल, तर React commit phase मध्ये काहीही करत नाही. • React.memo function call वगळते. ते DOM update वगळत नाही. • Props मुळे re-renders ट्रिगर होत नाहीत. Parent re-render झाल्यामुळे child re-render होतो. Prop मधील बदल हा केवळ त्याचा परिणाम असतो.
How to Fix Performance:
जर तुमचे function स्लो असेल, तर तुम्हाला Render ची समस्या आहे. जड कामे (heavy work) function च्या बाहेर हलवा किंवा memoization वापरा.
जर React खूप मोठ्या लिस्ट पुन्हा तयार करत असेल, तर तुम्हाला Reconcile ची समस्या आहे. तुमच्या keys तपासा.
जर DOM खूप जास्त अपडेट होत असेल, तर तुम्हाला Commit ची समस्या आहे. Virtualization वापरा किंवा तुमची स्ट्रक्चर बदला.
React 19 आणि React Compiler आता तुमचे हे काम मोठ्या प्रमाणात स्वतः हाताळतात. परंतु हे टप्पे माहित असल्यास तुम्हाला अधिक चांगल्या प्रकारे debug करण्यास मदत होते.