React › Virtual DOM & Reconciliation

Why does the virtual DOM make React apps feel fast even when data changes frequently?

Beginner

Answer

Directly changing the real browser page is a relatively slow operation, since the browser has to recalculate layout and repaint the screen. By first figuring out the smallest necessary set of real changes using the lightweight virtual DOM, React avoids unnecessary, expensive updates to the real page, keeping the app feeling smooth and responsive even with frequent data changes.

// Without a virtual DOM approach, every small change might redraw large parts of the page
// With React's virtual DOM, only the truly changed parts of the real page are touched
// resulting in noticeably smoother updates for the user

Real-world example A live sports score app updates just the specific number that changed on the scoreboard many times per minute, without the rest of the page flickering or feeling sluggish, thanks to React's efficient virtual DOM comparison process.

Common follow-ups: Is the virtual DOM always faster than directly updating the real DOM in every single situation?;How do newer approaches, like fine grained reactivity in other frameworks, compare to React's virtual DOM approach?

Performance (memo/useMemo);Concurrent Hooks (useTransition useDeferredValue & useLayoutEffect)