What is Reconciliation and the Virtual DOM (VDOM)?

An explanation of how React's Virtual DOM (VDOM) and reconciliation process work. The VDOM is a JavaScript representation of the DOM that React uses to track state changes. Reconciliation is the three-step process of listening for state changes, diffing the VDOM, and committing updates to the real DOM. A key practical example demonstrates why the `key` prop is essential when rendering lists — without it, React uses array index as the default identifier, causing mismatched state when items are inserted at non-end positions.