Что происходит с DOM-деревом при обновлении состояния в React?

Как React обновляет DOM

Когда вы вызываете setState или используете хуки, React помечает компонент как измененный и планирует повторный рендер. Вместо немедленного изменения реального DOM, React строит новое виртуальное DOM-дерево, которое является легковесным JavaScript-представлением интерфейса. Это дерево сравнивается с предыдущим с помощью алгоритма согласования (reconciliation), который находит различия и формирует список минимальных операций для обновления реального DOM.

Процесс обновления

• Создание нового виртуального дерева на основе текущего состояния.
• Сравнение с предыдущим виртуальным деревом (diffing).
• Вычисление патча — набора изменений (добавление, удаление, обновление узлов).
• Применение патча к реальному DOM в одном пакете, что уменьшает количество перерисовок.

Пример

function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// При клике React создает новое виртуальное дерево с count=1,
// сравнивает с предыдущим (count=0) и обновляет только текст кнопки.

Вывод

Использование виртуального DOM позволяет React эффективно обновлять интерфейс, избегая дорогостоящих операций с реальным DOM. Это особенно полезно в больших приложениях с частыми изменениями состояния, где производительность критична.