Каким образом можно управлять жизненным циклом компонента в React с использованием хука useEffect?

Хук useEffect в React позволяет управлять жизненным циклом функционального компонента, выполняя побочные эффекты после рендера. Его можно использовать для:

• Выполнения кода при монтировании компонента (аналог componentDidMount), если передать пустой массив зависимостей.
• Обновления эффекта при изменении указанных зависимостей.
• Очистки ресурсов при размонтировании компонента (аналог componentWillUnmount) с помощью функции очистки.

Пример:

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

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // Функция очистки, вызывается при размонтировании
    return () => clearInterval(id);
  }, []); // пустой массив — эффект запускается один раз при монтировании

  return <div>Счётчик: {count}</div>;
}