Virtual DOM (VDOM) — это лёгкий JavaScript-объект-дерево, которое описывает, как должен выглядеть пользовательский интерфейс. Это простое представление в памяти — не реальный браузерный DOM. React использует его, потому что прямое манипулирование реальным DOM медленно, и делать это вручную при каждом изменении состояния подвержено ошибкам.
Когда состояние меняется, React не сразу касается страницы. Вместо этого он:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
Так что вы пишете код декларативно ("UI выглядит вот так при таком состоянии") и React вычисляет императивные DOM операции для вас.
document.querySelector + мутация.