What is the Virtual DOM in React, and how does reconciliation work?

Direct answer

The Virtual DOM is a common name for React's in-memory representation of UI; reconciliation is the process React uses to match a newly rendered tree with the previous one and determine what should be preserved or changed.

When props, state, or context changes, React renders the next element tree. React then matches that result with the previous tree and commits the required changes to the host environment such as the browser DOM.

Element/component type: helps React decide whether an existing subtree represents the same kind of UI.
Keys: help React preserve identity among siblings when collections change.
Stable position and identity: influence whether component state is preserved or reset.