Что произойдёт с узлом дерева, если тип элемента изменился?

Что происходит при изменении типа элемента

В React процесс согласования (reconciliation) сравнивает виртуальные DOM-деревья. Если тип элемента изменился (например, <div> стал <span> или один компонент заменился другим), React не пытается обновить существующий узел. Вместо этого он полностью удаляет старый узел и все его дочерние элементы, после чего создаёт новый узел с нуля.

Почему это важно

Это поведение гарантирует, что состояние и побочные эффекты старого компонента не переносятся в новый. Например, если у вас был компонент <Counter /> с внутренним состоянием счётчика, и вы заменили его на <Timer />, React уничтожит Counter и создаст Timer заново. Это предотвращает неожиданное поведение, когда старый state остаётся в новом компоненте.

Пример кода

function App() {
  const [isCounter, setIsCounter] = useState(true);
  return (
    <div>
      <button onClick={() => setIsCounter(!isCounter)}>
        Переключить
      </button>
      {isCounter ? <Counter /> : <Timer />}
    </div>
  );
}

При нажатии на кнопку тип элемента меняется с Counter на Timer. React удалит Counter (вызовет cleanup в useEffect) и смонтирует Timer заново.

Вывод

Изменение типа элемента — это сигнал React для полного пересоздания узла. Это полезно, когда нужно гарантировать, что старый компонент не влияет на новый, например, при переключении между разными виджетами или страницами.