मुझे बताइए कि जब React किसी component को दोबारा render करता है तो क्या होता है। reconciliation कैसे तय करती है कि असल में DOM तक क्या पहुंचेगा?

state बदलने पर React component function दोबारा चलाता है ताकि elements का नया पेड़ बने, फिर उसकी तुलना पिछले पेड़ से करता है। वह node के type और keys की तुलना जगह दर जगह करता है: एक ही type का मतलब है React वहीं props अपडेट कर देगा, अलग type का मतलब है पुराना subtree हटाकर नया लगाया जाएगा। इसके बाद जो कम से कम बदलाव बनते हैं, सिर्फ वही असली DOM पर commit होते हैं।

तो जब state बदलती है, React component function को फिर से बुलाता है, और उससे उसे elements का नया पेड़ मिलता है। वह render चरण है, और अब तक DOM को छुआ भी नहीं गया। फिर वह नए पेड़ को पुराने के आगे रखकर चलता है। हर जगह पर वह पहले element का type देखता है। अगर type वही है, मान लीजिए div div ही रहा, तो वह मौजूदा DOM node और मौजूदा state रखे रहता है और सिर्फ बदले हुए props patch कर देता है। अगर type अलग है, तो वह पूरा subtree फेंककर नया बनाता है, जिसका मतलब है उसके अंदर की सारी state चली गई। lists के लिए वह सीधी जगह की जगह keys इस्तेमाल करता है, ताकि items दोबारा बने बिना अपनी जगह बदल सकें। फिर जमा हुए सारे बदलाव एक commit दौर में लागू होते हैं। व्यवहार में मुझे इसकी परवाह इसलिए है कि मैंने एक बार ऐसा form debug किया जो हर keystroke पर खुद को reset कर देता था, और वजह यह थी कि parent उसे एक ऐसे conditional के अंदर render कर रहा था जो wrapper element का type बदल देता था। एक बार diff के नियम पता हों तो यह दोपहर भर का नहीं, पांच मिनट का काम है।