All 5 Virtual DOM & Reconciliation questions
More in Virtual DOM & Reconciliation
What is the virtual DOM in React, and why does React use it? Why does the virtual DOM make React apps feel fast even when data changes frequently? What is reconciliation in React, and how does it decide what actually needs to change on the screen? Why does changing an element's key prop cause React to completely remove and recreate that element instead of just updating it?
Advertisement
Back to results for “App Lifecycle”
React › Virtual DOM & Reconciliation

How does React's reconciliation process handle components of a completely different type appearing in the same position?

Intermediate

Answer

When React compares the new virtual DOM to the old one and finds a completely different type of element or component in the same position, such as a div being replaced by a span, it assumes these are unrelated and simply removes the old one entirely, along with any of its state, before creating and inserting the new one fresh.
// Before: <LoggedOutView />
// After:  <LoggedInView />
// React completely removes LoggedOutView, including any of its internal state,
// and creates LoggedInView fresh, since they are considered entirely different components
Real-world example A login page's form component is fully unmounted and a completely separate dashboard component is mounted fresh the moment a user successfully logs in, since React treats these as entirely unrelated components rather than trying to update one into the other.

Common follow-ups: Does this full replacement behavior have any noticeable performance impact for very large components?;How is this different from what happens when only a prop value changes on the exact same component type?

Conditional Rendering & Lists (Keys);Effects & Lifecycle
All 5 Virtual DOM & Reconciliation questions