Как React сравнивает 2 узла?

Два узла (старый и новый элемент одной позиции) React сравнивает в порядке: key → тип → props.

Шаг 1: key

Если у элементов есть key, сначала сверяется он. Разные key — это разные сущности: старый узел размонтируется, новый создаётся (даже при одинаковом типе). В списках key используется для сопоставления детей между рендерами.

Шаг 2: тип (type)

Разные типы — узлы считаются несовместимыми:

<div>...</div>  →  <span>...</span>       // div удаляется со всем поддеревом
<UserView />    →  <AdminView />           // state теряется, новое монтируется

Поддеревья не сравниваются — пересоздание целиком.

Одинаковый тип — узел «тот же», обновляем:

• DOM-элемент ('div'): сохраняется сам узел; поэлементно сравниваются props/атрибуты (по Object.is) — в патч попадают только отличия (className, отдельные поля style, обработчики);
• компонент (функция/класс): экземпляр и state сохраняются; компонент вызывается с новыми props, и сравнение рекурсивно продолжается по его выводу.

Шаг 3: рекурсия по детям

Дети сравниваются попарно по позициям; при наличии key — по ключам (что позволяет распознавать перестановки). Особый случай: если элемент та же ссылка, что в прошлом рендере (мемоизированный JSX, children из пропсов), React пропускает его поддерево без сравнения.

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

Порядок: key (разный — пересоздание), затем тип (разный — удалить поддерево и построить заново; одинаковый — сохранить узел/экземпляр), затем для DOM-узлов поверхностный дифф props (правятся только отличия), для компонентов — рекурсия по их выводу. Дети сопоставляются по позициям или key; идентичные ссылки на элементы пропускаются.