Чому бібліотека React швидка? Що таке Virtual DOM і Shadow DOM?

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

Що це і навіщо

• Virtual DOM – абстрактна, віртуальна репрезентація реального DOM. React створює дерево Virtual DOM після кожного рендеру, а потім порівнює його з попереднім за допомогою алгоритму diffing. Результатом є список мінімальних змін, які застосовуються до реального DOM.

• Shadow DOM – частина Web Components, що створює ізольований піддерево DOM і CSS‑контекст. Це дозволяє компоненту мати власні стилі, не впливаючи на глобальний CSS.

Ключові принципи/терміни

• Diffing algorithm – рекурсивне порівняння вузлів, що мінімізує кількість DOM‑операцій.
• Reconciliation – процес синхронізації Virtual DOM з реальним.
• Batched updates – React збирає кілька змін у один пакет, щоб уникнути багатьох рендерів.

Як це працює

1. Компонент виконує render(), повертаючи JSX.
2. React трансформує JSX у Virtual DOM‑вузли (об’єкти).
3. Після наступного рендеру React порівнює нове дерево з попереднім.
4. На основі diff‑результату оновлює лише ті вузли, що змінилися.

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

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

У цьому прикладі лише текст кнопки оновлюється, а інші атрибути залишаються незмінними.

Тестування

• Unit: @testing-library/react + Jest для перевірки, що компонент рендериться з очікуваним текстом.
• Integration: react-test-renderer для snapshot‑тестів Virtual DOM.

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

• Використання React.memo для запобігання зайвим рендером.
• Підтримка key у списках для правильного diff‑інструменту.

Производительность і масштабирование

• Пакетні оновлення (flushSync) зменшують кількість рендерів.
• useDeferredValue дозволяє відкладати важкі обчислення.

Безпека і приватність

• Virtual DOM не виконує небезпечних скриптів; безпечний рендер JSX.
• Shadow DOM ізолює стилі, що зменшує ризик CSS‑ін’єкцій.

Особливості в контексті React

• Відсутність прямого доступу до реального DOM у функціональних компонентах.
• ReactDOM.createPortal дозволяє рендерити в інші частини DOM, не порушуючи Virtual DOM.

Оптимізація та типові помилки

• Необхідність key у списках.
• Перевантаження стану в компоненті, що викликає зайві рендери.
• Використання useCallback/useMemo для стабільності функцій.

Диагностика

• Якщо UI «завис» після оновлення, перевірте React DevTools → Performance tab.
• Пошукайте зайві рендери за допомогою why-did-you-render.

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

• Vue.js використовує аналогічний Virtual DOM.
• Svelte компілює компонент у прямий DOM‑маніпулятор, що може бути швидшим в деяких випадках.

Крайні випадки

1. Великий список без key → повний рендер.
2. Синхронні запити у useEffect → блокування UI.
3. Відсутність React.StrictMode → дублювання рендерів у dev‑режимі.
4. Перевантаження стану в useState → непотрібні оновлення.
5. Використання dangerouslySetInnerHTML → XSS‑ризик.
6. Необхідність ReactDOM.unstable_batchedUpdates у колекціях.
7. Відсутність useRef для DOM‑елементів → повторні створення.
8. Переважання class замість className → помилки рендеру.