Зачем нужен Virtual DOM в React?

Virtual DOM нужен React, чтобы совместить две вещи, которые конфликтуют между собой: декларативный код («опиши, как UI выглядит») и эффективные обновления («меняй в DOM минимум»).

Проблема, которую он решает

Декларативная модель в лоб означала бы: на каждое изменение состояния стереть DOM и построить заново — корректно, но недопустимо дорого (плюс потеря фокуса, выделения, скролла). Императивная альтернатива — вручную обновлять нужные узлы — быстра, но в большом приложении превращается в неподдерживаемую сеть зависимостей «данные → куски DOM».

Как Virtual DOM снимает конфликт

setState
  → компоненты возвращают НОВОЕ полное описание UI (дёшево: JS-объекты)
  → React сравнивает его с прошлым описанием (diffing)
  → к реальному DOM применяется только разница (commit)

Разработчик пишет так, будто UI пересоздаётся целиком; React обеспечивает, что физически обновляется минимум.

Дополнительные выгоды

• Батчинг: правки DOM применяются пакетом — меньше reflow.
• Сохранение состояния DOM: фокус и ввод не теряются, потому что узлы переиспользуются, а не пересоздаются.
• Абстракция от платформы: то же дерево рендерится в HTML на сервере или в нативные компоненты (React Native).
• Прерываемость: работа над виртуальным деревом — обычные вычисления, их можно приостанавливать и приоритизировать (Fiber, React 18).

Коротко для собеседования

Virtual DOM позволяет писать декларативно («UI = функция состояния»), не платя за полное пересоздание DOM: React строит новое виртуальное дерево, сравнивает со старым и вносит в реальный DOM только разницу, батчируя правки. Бонусы — сохранение фокуса/состояния узлов, платформонезависимость и прерываемый рендеринг.