Что такое виртуальный DOM и как React решает, когда обновлять реальный DOM?

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

Основные моменты:

• React создает виртуальное представление UI (Virtual DOM).
• При изменении состояния создается новый Virtual DOM.
• React сравнивает новый Virtual DOM с предыдущим (diffing).
• Находит минимальный набор изменений (patches).
• Применяет эти изменения к реальному DOM, что эффективно обновляет UI.

Пример:

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

При каждом клике React создаст новый Virtual DOM для кнопки, сравнит с предыдущим и обновит только текст внутри кнопки, не перерисовывая весь элемент.