Что такое React Reconciliation?

Reconciliation (согласование) — алгоритм, которым React сравнивает новое виртуальное дерево со старым и вычисляет минимальный набор изменений для реального DOM.

Зачем нужен

Честное сравнение двух деревьев стоит O(n³) — неприменимо. React использует эвристики, сводящие задачу к O(n), опираясь на два допущения: элементы разных типов дают разные поддеревья, а стабильные элементы списка разработчик помечает key.

Правила сравнения

Разные типы узлов — поддерево пересоздаётся целиком:

<div><Counter /></div>  →  <span><Counter /></span>
// div удаляется вместе с Counter (его state теряется), span строится заново

Один тип DOM-элемента — узел сохраняется, обновляются только изменившиеся атрибуты и стили; затем рекурсивно сравниваются дети.

Один тип компонента — экземпляр и state сохраняются, компонент рендерится с новыми props.

Списки детей — без key сравнение по позициям (вставка в начало = «изменилось всё»); с key React сопоставляет элементы по ключу и понимает перемещения/вставки/удаления.

Следствия для практики

• Смена типа обёртки сбрасывает состояние всего поддерева.
• Намеренная смена key — способ принудительно пересоздать компонент (<Form key={userId} />).
• Нельзя объявлять компонент внутри рендера другого: каждый рендер это «новый тип» → постоянное пересоздание.

Связь с Fiber

С React 16 reconciliation работает на архитектуре Fiber: сравнение разбито на прерываемые единицы работы, что позволяет приоритизировать срочные обновления (ввод) над несрочными (React 18, конкурентный рендеринг). Итог сравнения применяется к DOM одним куском в commit-фазе.

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

Reconciliation — O(n)-алгоритм сравнения виртуальных деревьев: разные типы → пересоздание поддерева, тот же тип → точечное обновление атрибутов и сохранение state, списки — сопоставление по key. Поэтому важны стабильные key и стабильные типы компонентов; с Fiber процесс прерываемый и приоритизируемый.