Virtual DOM (VDOM) là một cây đối tượng JavaScript nhẹ mô tả giao diện người dùng (UI) trông như thế nào. Nó là một biểu diễn thuần trong bộ nhớ — không phải DOM thật của trình duyệt. React sử dụng nó vì thao tác trực tiếp lên DOM thật rất chậm, và làm điều đó thủ công ở mỗi lần thay đổi state thì dễ phát sinh lỗi.
Khi state thay đổi, React không lập tức chạm vào trang. Thay vào đó nó:
function Counter() {
const [n, setN] = useState(0);
// Mỗi lần click tạo ra một cây virtual MỚI mô tả <button>{n}</button>.
// React so sánh cũ với mới và chỉ cập nhật text node đã thay đổi,
// chứ không phải toàn bộ button hay cả trang.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
Vì vậy bạn viết code theo cách khai báo (declarative) ("UI trông như thế này với state này") và React tự tính toán các thao tác DOM mệnh lệnh (imperative) giúp bạn.
document.querySelector rồi mutate.