जब React कहता है Re-render, तो इसका मतलब तीन चीजें होती हैं
जब आप setState कॉल करते हैं, तो React केवल DOM को अपडेट नहीं करता है। यह एक क्रम में तीन अलग-अलग चरणों (phases) को चलाता है। अधिकांश डेवलपर्स इन चरणों में भ्रमित हो जाते हैं। इनके बीच के अंतर को समझना आपको परफॉरमेंस (performance) संबंधी समस्याओं को ठीक करने में मदद करता है।
तीन चरण:
• Render: React आपके component function को कॉल करता है। • Reconcile: React नए आउटपुट की तुलना पुराने आउटपुट से करता है। • Commit: React DOM में बदलाव लागू करता है।
- Render Phase
React आपके function को चलाता है। यह वर्तमान props का उपयोग करता है। function JSX रिटर्न करता है। यह JSX केवल JavaScript objects की एक सूची है। लोग इसे virtual DOM कहते हैं। यह वास्तविक DOM नहीं है। यह इस बात का विवरण है कि UI कैसा दिखना चाहिए। अभी स्क्रीन पर कुछ भी दिखाई नहीं देता है। यह चरण पूरी तरह से गणित और तर्क (logic) पर आधारित है।
- Reconcile Phase
React पुराने tree और नए tree को रखता है। यह उनके बीच के अंतरों को देखता है। यदि element type बदलता है, तो React पूरे tree को बदल देता है। यदि केवल props बदलते हैं, तो React उन्हें अपडेट कर देता है। यहीं पर keys महत्वपूर्ण होती हैं। Keys React को सूची (list) में वस्तुओं को उनकी स्थिति (position) के बजाय पहचान (identity) के आधार पर मिलाने में मदद करती हैं। यह चरण DOM को अपडेट करने के लिए आवश्यक न्यूनतम चरणों की एक सूची बनाता है।
- Commit Phase
React बदलावों की सूची लेता है और वास्तविक DOM को छूता है (touches)। यह नए nodes बनाता है और पुराने को हटा देता है। इसी समय उपयोगकर्ता स्क्रीन पर बदलाव देखते हैं। इसके बाद, ब्राउज़र स्क्रीन को पेंट (paint) करता है। फिर, useEffect चलता है।
सामान्य गलतफहमियाँ:
• एक re-render हमेशा DOM को नहीं बदलता है। यदि आउटपुट समान है, तो React commit phase में कुछ नहीं करता है। • React.memo function call को छोड़ देता है। यह DOM update को नहीं छोड़ता है। • Props re-renders को ट्रिगर नहीं करते हैं। एक parent का re-render होना child को ट्रिगर करता है। Prop में बदलाव केवल एक परिणाम है।
परफॉरमेंस को कैसे ठीक करें:
यदि आपका function धीमा है, तो आपके पास Render की समस्या है। भारी काम को function से बाहर निकालें या memoization का उपयोग करें।
यदि React बड़ी सूचियों (lists) को फिर से बनाता है, तो आपके पास Reconcile की समस्या है। अपनी keys की जाँच करें।
यदि DOM बहुत अधिक अपडेट होता है, तो आपके पास Commit की समस्या है। virtualization का उपयोग करें या अपने structure को बदलें।
React 19 और React Compiler अब आपके लिए इस काम का बहुत सा हिस्सा संभाल लेते हैं। लेकिन इन चरणों को जानने से आपको बेहतर तरीके से debug करने में मदद मिलती है।