React component असल में किन वजहों से दोबारा render होता है, और वह DOM अपडेट से अलग क्यों है?

component तब दोबारा render होता है जब उसकी अपनी state बदले, जब वह जिस context को इस्तेमाल करता है वह नई value दे, या जब उसका parent दोबारा render होकर उसके लिए नया element बनाए। rendering बस function को बुलाती है और UI का एक विवरण बनाती है। फिर React उसे पिछले tree से diff करता है और सिर्फ वही DOM बदलाव commit करता है जो अलग हैं, तो ज़्यादातर re-renders DOM को छूते ही नहीं।

तीन चीज़ें इसे चलाती हैं: component में state का अपडेट, वह context value बदलना जिसे वह subscribe करता है, या parent का दोबारा render होना। आखिरी वाली जगह लोग चौंकते हैं, क्योंकि parent का render हर child function दोबारा चलाता है, चाहे उसके props की values बदली हों या नहीं। पर rendering सिर्फ एक element tree बनाती है। React उसे पिछले tree से मिलाता है और DOM में कम से कम बदलाव commit करता है, तो re-render अक्सर सस्ता होता है और DOM को छूता ही नहीं। महंगे मामले बड़े subtrees और render के अंदर भारी गणना हैं। जिस प्रोडक्ट पर मैं था वहां जब एक पेज सुस्त लगा, तो मैंने अंदाज़ा लगाने की जगह React DevTools का profiler खोला, और अपराधी एक ही context निकला जो मौजूदा user और live search string दोनों रखे था, तो हर keystroke पूरा authenticated shell दोबारा render करता था। उसे दो contexts में बांटने से करीब दस लाइनों में ठीक हो गया। memo की तरफ मैं तभी जाता हूं जब profiler बता दे कि कोई खास subtree ही समस्या है।