Virtual DOM / Reconciliation
The framework compares old and new in-memory UI trees, then changes only the real DOM parts that need to catch up.
See it
What it is
A virtual DOM is an in-memory description of UI. When data changes, a framework renders a new description and reconciliation compares it with the previous one to decide which real DOM operations to commit. React uses element types, positions, and keys to match old children with new ones and preserve the right component state. Not every framework works this way: Svelte and Solid compile updates directly and ship no virtual DOM at all.
You usually do not call reconciliation yourself. You help it by making rendering pure, giving list items stable keys from their data, and expressing the desired result instead of manually patching DOM that the framework owns.
Gotcha: fewer DOM writes does not mean rendering is free or that the algorithm finds a mathematically smallest edit script. The framework still runs component code and compares trees. An unstable or index key can also make the wrong item keep state, which looks like text fields or animations jumping between rows.
Ask AI for it
Refactor this React list so reconciliation preserves the correct items. Use stable database IDs for key, keep the render function pure, remove direct DOM mutations, and preserve element types when state should survive. Add a React Profiler comparison for inserting an item at the top with index keys versus record.id keys, and explain which rows mounted, updated, or retained state.