How does the virtual DOM and reconciliation work?

A React element is a lightweight object describing what should appear. On each render, React creates a new tree. It then compares the new tree with the previous one and updates only the parts whose type, position or key changed.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

The diffing heuristics

• Different element types cause React to unmount the old subtree and mount a new one
• Same element type keeps the DOM node and updates changed attributes
• Lists use keys to match items across renders
• React compares siblings by position when keys are absent

The virtual DOM is not automatically faster than careful direct DOM work. Its value is that it lets you write declarative code while React batches and minimises updates. React's Fiber architecture makes rendering interruptible and supports concurrent features.