Что произойдёт с дочерним компонентом при изменении key у родительского компонента?

Что произойдёт с дочерним компонентом при изменении key у родительского компонента?

• В React значение key используется для идентификации компонентов в DOM.
• Если key изменяется, родительский компонент создаётся заново, а не обновляется.
• Все дочерние компоненты этого родителя также проходят размонтирование (unmount).
• Затем дочернее дерево монтируется заново (mount).
• В результате сбрасываются состояние компонентов и их жизненный цикл.
• Такой подход применяют, когда требуется полностью сбросить состояние компонента.
• Он также используется для принудительной реинициализации UI после изменения данных.

Итог: изменение key у родителя перерабатывает всё subtree, включая дочерние компоненты, которые полностью создаются заново вместе со сбросом состояния.

Подробный ответ

Основной ответ

Когда у родительского компонента в React меняется key, React считает, что перед ним находится уже другой компонент. Поэтому он не обновляет существующий экземпляр, а удаляет старый и создаёт новый вместе со всеми дочерними элементами. Дочерние компоненты также пересоздаются с нуля, из-за чего их жизненный цикл запускается повторно: например, у старого компонента вызывается componentWillUnmount, а у нового — componentDidMount.

Ключевые моменты

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

Практический контекст

Распространённый пример — динамические списки, в которых каждому элементу назначается уникальный key. Если изменить key родителя, например переключить ключ корневого компонента, всё его содержимое и состояние дочерних компонентов будут загружены заново. Такой приём иногда используют для принудительного сброса. В React 18 и новее эффект может быть особенно заметен из-за новых механизмов concurrent rendering.