Q32: What are the two core assumptions of React's O(n) diffing algorithm during Reconciliation?
A general heuristic tree-diffing algorithm takes $O(n^3)$ operations. React achieves $O(n)$ by assuming:
- Two elements of different types will produce entirely different trees (dismantles and rebuilds subtrees).
- Developer keys hint at which child elements remain stable across renders in dynamic lists.
Type Mismatch Subtree Replacement
// Render 1
<div><Counter /></div>
// Render 2: Type changes from <div> to <section>
<section><Counter /></section>💡 Because container type changed from div to section, React unmounts old Counter and builds new Counter instance.
Key Takeaways
- Changing root tag types (
<div>to<section>) unmounts and rebuilds the entire subtree. - Stable keys allow matching children across list re-ordering operations.
Knowledge Check
What occurs when the top root element type changes from <div> to <main> between renders?