Что происходит, если изменился тип компонента? Поможет ли одинаковый key сохранить состояние?

Поведение React при смене типа компонента

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

Роль key

Атрибут key помогает React идентифицировать элементы среди однотипных компонентов (например, в списке). Однако при смене типа компонента key не влияет на решение React: тип имеет приоритет. Даже если указать одинаковый key, React все равно пересоздаст компонент, так как типы разные.

Пример

// Компонент A и B — разные типы
function A() { return <div>A</div>; }
function B() { return <div>B</div>; }

// При переключении с A на B состояние не сохранится
{condition ? <A key="same" /> : <B key="same" />}

Когда key помогает

Key эффективен, когда тип компонента не меняется, но меняется его позиция в списке или добавляются/удаляются элементы. Например, при сортировке массива компонентов одного типа key позволяет React сохранить состояние каждого элемента, сопоставляя их по ключу.

Вывод

Изменение типа компонента всегда приводит к потере состояния, независимо от key. Key полезен только для однотипных компонентов в динамических списках. Используйте key для стабильной идентификации элементов одного типа, чтобы избежать ненужного пересоздания.