What is the virtual DOM in React?

React Beginner Questions - Set 6

A JavaScript description of the UI. The clearest evidence is that no DOM node changes when nothing visible changes.

Example

import { useState } from 'react';

export default function Panel() {
  const [open, setOpen] = useState(false);
  const [clicks, setClicks] = useState(0);

  return (
    <div>
      {/* re-renders with every click, but its DOM node is untouched */}
      <h2>Static heading</h2>
      <button onClick={() => setClicks(c => c + 1)}>Clicks: {clicks}</button>
      <button onClick={() => setOpen(o => !o)}>{open ? 'Close' : 'Open'}</button>
      {open && <p>Panel content</p>}
    </div>
  );
}

What to notice

Each render builds a new tree of plain objects — cheap compared with DOM nodes.
React diffs old against new, then commits only the differences to the real DOM.
DevTools' 'Highlight updates' option makes the difference between render and commit visible.

← Back to the question list