A Look Behind the Scenes of React & Optimization TechniquesEntry 6 of 10

The Virtual DOM and Reconciliation

React keeps a lightweight in-memory description of the UI (the virtual DOM). After each render, it compares the new description with the previous one and applies only the differences to the real DOM.

Notes

  1. A component re-renders and returns new JSX (a new element tree).
  2. React diffs it against the previous tree (reconciliation).
  3. React updates only the real DOM nodes that changed.

This is why a re-render is usually cheap: re-running a function and diffing objects is much faster than touching the DOM. It's also why unnecessary re-renders still cost something: the diff work happens even if nothing changes on screen.

Angular

Angular has no virtual DOM. The compiler turns each template into instructions that update specific DOM nodes when their bindings change. With signals, Angular knows exactly which bindings depend on which values, so there is no tree to diff.

Quick reference

ReactAngular
Virtual DOM + diffingCompiled templates, binding-level updates
Re-render → diff → DOM patchSignal change → binding update → DOM patch