Что происходит с компонентом при изменении key? Расскажи про жизненный цикл функциональных компонентов.

При изменении key у компонента в React происходит его размонтирование (unmount) старого компонента и монтирование (mount) нового. Это связано с тем, что key используется React для идентификации компонентов в списках и оптимизации рендеринга.

Если key меняется, React считает, что это совершенно другой компонент, поэтому:

• Старый компонент вызывается метод componentWillUnmount (для классовых) или выполняется очистка эффектов (для функциональных).
• Новый компонент создаётся заново, вызываются методы жизненного цикла или эффекты.

Жизненный цикл функциональных компонентов в React с хуками:

1. Монтирование:

   • Выполняется функция компонента.
   • Выполняются эффекты с useEffect без зависимостей или с пустым массивом зависимостей.

2. Обновление:

   • Компонент повторно вызывается при изменении пропсов или состояния.
   • Выполняются эффекты с изменёнными зависимостями.

3. Размонтирование:

   • Выполняется функция очистки из useEffect (если она возвращена).

Пример с useEffect:

useEffect(() => {
  // код эффекта
  return () => {
    // очистка при размонтировании или перед следующим вызовом эффекта
  };
}, [dependencies]);

Таким образом, изменение key приводит к полному пересозданию компонента, что влияет на его жизненный цикл.