🌐Virtual DOM & Reconciliation

1. State/props change triggers re-render (component function runs)
2. React creates a new Virtual DOM tree (plain JS objects)
3. React diffs it with the previous tree (reconciliation)
4. Calculates minimal set of changes
5. Commits changes to the real DOM

Key insight: Components re-run but the real DOM is touched minimally.

React makes two assumptions for O(n) diffing:

1. Different element types → destroy old subtree, create new one
2. Same element type → update changed attributes only
3. Lists → use key props to identify elements

jsx
// Good — stable keys
items.map(item => <Item key={item.id} {...item} />)

// Bad — index as key (breaks reordering)
items.map((item, i) => <Item key={i} {...item} />)

"Virtual DOM optimizes DOM updates, but component functions still re-run on every render."

This is what separates senior answers:

• VDOM doesn't prevent re-renders
• It prevents unnecessary DOM mutations
• React.memo, useMemo, useCallback prevent component re-execution

Alternatives to VDOM:

Framework	Approach
Svelte	Compile-time static analysis, no VDOM
Vue 3	Fine-grained reactivity (Proxy-based)
Angular	Change detection zones