Как выполнение эффектов связано с DOM при рендеринге в React

React использует виртуальный DOM (VDOM) для оптимизации рендеринга. При изменении состояния:

1. React создает новый VDOM
2. Сравнивает его с предыдущим (reconciliation)
3. Определяет минимальные изменения (diffing)
4. Планирует обновление реального DOM (commit phase)

Эффекты (useEffect) выполняются после рендеринга компонента и коммита изменений в DOM. Это позволяет безопасно работать с реальным DOM, так как он уже обновлен.

useEffect(() => {
  // Этот код выполнится после рендеринга и обновления DOM
  document.title = `New title`; 
}, [deps]);

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