Можно ли вызвать монтирование или размонтирование компонента с помощью key в React
Что проверяют
Понимаете ли вы, что key это часть идентичности элемента, а не только способ убрать предупреждение в списке. Следом обычно спрашивают, как сбросить состояние формы при смене пользователя и чем плох индекс массива в роли ключа.
Как отвечать
Да, и это официальный приём. При сверке дерева React считает элемент тем же, если на той же позиции у него тот же тип и тот же key. Поменяли ключ, значит, это другой компонент:
- размонтирование старого: выполняются функции очистки из
useEffect, состояниеuseStateиuseRefтеряется, DOM-узлы удаляются; - монтирование нового: компонент стартует с начальным состоянием, эффекты запускаются заново, DOM создаётся с нуля.
Типичное применение: <ProfileForm key={userId} />. При переключении пользователя форма сбрасывается целиком, без useEffect, который вручную обнуляет каждое поле. Так же сбрасывают плеер при смене трека или анимацию. Ключ работает на любом элементе, не только внутри map, и должен быть уникален лишь среди соседей.
Для Node.js-разработчика, который делает серверный рендеринг (Next.js, renderToString, renderToPipeableStream), важна деталь: на сервере эффекты не выполняются вообще, поэтому монтирование в смысле useEffect происходит только на клиенте после гидратации. Сам key в HTML не попадает и в пропсы компонента не передаётся.
Второй способ вызвать ремаунт: сменить тип компонента на той же позиции. <A /> вместо <B /> тоже сносит всё поддерево вместе с состоянием.
Где спотыкаются
Используют индекс как ключ в списке, который сортируется или из которого удаляют элементы. Состояние (введённый текст, раскрытая строка) остаётся у позиции и переезжает к чужому элементу.
Генерируют ключ прямо в рендере через Math.random() или crypto.randomUUID(). Компонент ремаунтится на каждом рендере, теряется фокус в полях ввода, падает производительность.
Путают ремаунт по ключу с двойным запуском эффектов в StrictMode. В режиме разработки React 18 и 19 намеренно монтирует, размонтирует и снова монтирует компонент, в продакшн-сборке этого нет.