> Что произойдет, если у компонента поменять ключ, но свойства останутся те же (React)

Короткий ответ

При смене ключа React воспринимает компонент как совершенно новый экземпляр, даже если props не изменились. Это приводит к полному unmount старого компонента и mount нового с нуля: сбрасывается локальное состояние, выполняются эффекты cleanup и повторная инициализация. React не выполняет сравнение props, так как ключ - единственный идентификатор для reconciliation.

Подробное объяснение

Ключ (key) в React используется алгоритмом reconciliation для идентификации элементов в списках и при сравнении виртуальных DOM-деревьев. Когда ключ меняется, React считает, что старый компонент удалён, а новый добавлен. Это происходит независимо от того, изменились ли props или нет.

Процесс включает:

• Вызов componentWillUnmount или cleanup в useEffect
• Сброс всего локального состояния (useState, useReducer)
• Удаление DOM-узла и создание нового
• Вызов constructor или инициализации функционального компонента
• Выполнение useEffect с новыми зависимостями

React не пытается "переиспользовать" предыдущий экземпляр, потому что ключ - это единственный критерий для сопоставления элементов между рендерами. Если ключ изменился, предыдущий элемент считается отсутствующим в новом дереве.

На практике

Изменение ключа при неизменных props - это антипаттерн, если вы хотите сохранить состояние компонента. Однако это может быть полезно в следующих случаях:

• Принудительный сброс формы или состояния компонента
• Перезапуск анимаций или таймеров
• Обновление данных при изменении внешнего идентификатора (например, userId)

Частая ошибка - использование индекса массива как ключа при динамических списках. При изменении порядка элементов ключи меняются, что приводит к пересозданию компонентов и потере состояния.

Пример кода

JSX
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('Mounted');
    return () => console.log('Unmounted');
  }, []);
  return <div>{count} <button onClick={() => setCount(c => c + 1)}>+</button></div>;
}

function App() {
  const [key, setKey] = useState(1);
  return (
    <div>
      <Counter key={key} />
      <button onClick={() => setKey(k => k + 1)}>Change key</button>
    </div>
  );
}
// При клике на "Change key" Counter пересоздаётся, счёт сбрасывается

Как отвечать на собеседовании

Начните с ключевого факта: смена ключа = полное пересоздание компонента. Объясните механизм reconciliation и роль ключа как идентификатора. Упомяните, что props не влияют на этот процесс. Приведите практический пример, когда это может быть полезно (сброс формы) и когда вредно (индекс как ключ). Покажите понимание lifecycle-методов и эффектов.

Что проверяет интервьюер

• Понимание алгоритма reconciliation в React
• Знание разницы между изменением props и изменением key
• Умение объяснить, как React идентифицирует компоненты
• Понимание lifecycle и эффектов при перемонтировании
• Способность применить теорию к реальным сценариям

Типичные ошибки

• Утверждение, что React сравнивает props при смене ключа
• Смешивание понятий key и ref
• Игнорирование сброса состояния и эффектов
• Предположение, что изменение ключа эквивалентно вызову forceUpdate
• Использование индекса массива как ключа без понимания последствий