What is virtual DOM? How does it actually work?

React opisuje UI jako strukturę w pamięci.

Po zmianie state lub props komponent jest ponownie renderowany logicznie, a React w procesie reconciliation ustala, jakie zmiany trzeba zastosować do prawdziwego DOM.

function Counter() {
  const [count, setCount] =
    useState(0);

  return <h1>{count}</h1>;
}

Po:

setCount(1);

React nie musi tworzyć całej strony od nowa. Aktualizuje to, co rzeczywiście się zmieniło.

Doprecyzowanie:
Nie warto mówić „Virtual DOM zawsze jest szybszy od DOM”. Najważniejsza korzyść to deklaratywny model UI i zarządzanie zmianami.