Virtual DOM
A lightweight JavaScript representation of the real DOM. React compares old and new virtual trees to compute minimal DOM updates.
Reconciliation Process
- Render — create new virtual tree from state/props
- Diff — compare with previous tree
- Commit — apply changes to real DOM
Keys Matter
// Bad — index as key when list reorders
{items.map((item, i) => <li key={i}>{item.name}</li>)}
// Good — stable unique id
{items.map(item => <li key={item.id}>{item.name}</li>)}
Using index as key causes wrong component state when items are inserted/deleted/reordered.
Interview Questions
Q: Is Virtual DOM always faster than direct DOM?
No. For simple updates, direct DOM manipulation can be faster. Virtual DOM wins with complex UIs through batching and minimal updates.
Q: What is React Fiber?
React's reconciliation engine rewrite. Enables incremental rendering, prioritization, and Suspense.
Q: What triggers a re-render?
- State change in component
- Parent re-render (unless memoized)
- Context value change for consumers