Cuéntame sobre el ciclo de vida de un componente…

Функциональные компоненты React не имеют собственных методов жизненного цикла, как классовые, но с появлением хуков можно управлять их жизненным циклом.

Основные этапы жизненного цикла функционального компонента с хуками:

Монтирование: компонент создаётся и рендерится в DOM. Для выполнения побочных эффектов при монтировании используется хук useEffect с пустым массивом зависимостей.
Обновление: при изменении пропсов или состояния компонент перерисовывается. useEffect с зависимостями позволяет реагировать на изменения конкретных значений.
Размонтирование: когда компонент удаляется из DOM, можно выполнить очистку в функции очистки, возвращаемой из useEffect.

Пример использования useEffect для имитации жизненного цикла:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Компонент смонтирован');

    return () => {
      console.log('Компонент будет размонтирован');
    };
  }, []); // пустой массив — эффект сработает один раз при монтировании и очистится при размонтировании

  useEffect(() => {
    console.log('count изменился:', count);
  }, [count]); // срабатывает при изменении count

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Кликни меня</button>
    </div>
  );
}

Cuéntame sobre el ciclo de vida de un componente funcional de React