Що таке Virtual DOM?

Повне пояснення

Що це і навіщо

Virtual DOM (VDOM) — внутрішнє представлення структури елементів інтерфейсу у вигляді об’єктної моделі, що існує в пам’яті. Його головна мета — мінімізувати прямий доступ до реального DOM, який є дорогим у плані продуктивності.

Ключові принципи

• Абстракція: VDOM відокремлює логіку рендерингу від реального DOM.
• Diff‑алгоритм: порівнює старий і новий VDOM, знаходить мінімальний набір змін.
• Batch‑updates: зміни застосовуються в пакетах, що зменшує кількість перерисувань.

Як це працює

1. Render: компонент повертає JSX/React‑елементи, які трансформуються у VDOM-об’єкти.
2. Diff: React (або інша бібліотека) порівнює новий VDOM з попереднім.
3. Patch: обчислені різниці застосовуються до реального DOM.

Практика і реалізація

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

У цьому прикладі при кожному кліку React створює новий VDOM, diff‑ує його і оновлює лише текст у кнопці.

Тестування

Для перевірки, що VDOM працює коректно, можна використовувати react-test-renderer:

import renderer from 'react-test-renderer';
const tree = renderer.create(<Counter />).toJSON();
expect(tree.children[0]).toBe('0');

Дизайн‑рішення

• Key у списках: допомагає diff‑алгоритму правильно ідентифікувати елементи.
• PureComponent / React.memo: запобігає зайвим перерендерингам.

Оптимізація

• Batching: React групує оновлення у один рендер.
• Avoid deep state mutations: мутування об’єктів у стані призводить до повного перерендерингу.

Безпека

VDOM сам по собі не впливає на безпеку, але правильне управління станом і props допомагає уникнути XSS‑уразливостей.

Альтернативи

• Svelte: компілює код у прямий DOM‑маніпуляції без VDOM.
• Vue 3: використовує реактивну систему, але також має VDOM‑подібний підхід.

Часті помилки

1. Мутування стану → викликає непередбачувані оновлення.
2. Відсутність key у списках → погана продуктивність і неправильні анімації.
3. Використання forceUpdate → обходить оптимізації.
4. Надмірне використання useEffect → створює зайві рендери.
5. Відсутність memoization → повторювані обчислення.
6. Неправильне використання ref → може порушити синхронність.
7. Використання dangerouslySetInnerHTML → ризик XSS.
8. Неправильна обробка асинхронних даних → оновлення після unmount.

Cheatsheet

• VDOM – пам’яттєва модель DOM.
• Diff – пошук мінімальних змін.
• Patch – застосування змін до реального DOM.
• Key – унікальний ідентифікатор елементу в списку.
• React.memo – запобігає зайвим перерендерингам.

Follow‑up питання

1. Як працює алгоритм diff у React?
2. Чому важливі ключі в списках?
3. Які альтернативи VDOM існують у сучасних фреймворках?