Reconciliation & Tree Comparison
Reconciliation is React's process of determining how the next element tree relates to the previous tree. React uses element type and key identity to make decisions about preserving or replacing subtrees.
If an element's type changes, React generally treats it as a different conceptual element. If the type and identity remain compatible, state can often be preserved.
You should not try to memorize every internal heuristic. Instead, learn the practical identity rules: component type, position, and keys affect whether state is preserved or reset.
Intentional reset with a key
function Editor({ documentId }) {
return <DocumentEditor key={documentId} documentId={documentId} />;
}💡 Changing the key tells React that the editor represents a new identity, so its local state can reset.
Key Takeaways
- Identity determines state preservation.
- Keys can intentionally reset a subtree.
- Do not assume every render recreates DOM nodes.