Жизненный цикл компонента React описывает этапы его создания, обновления и удаления из DOM.

Для классовых компонентов основные методы жизненного цикла:

constructor — инициализация состояния и привязка методов.
componentDidMount — вызывается после монтирования, подходит для загрузки данных.
shouldComponentUpdate — позволяет оптимизировать перерисовку.
componentDidUpdate — вызывается после обновления.
componentWillUnmount — очистка ресурсов перед удалением.

В функциональных компонентах жизненный цикл управляется с помощью хуков:

useState — хранит и обновляет состояние компонента.

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

useEffect — выполняет побочные эффекты (запросы, подписки). Можно контролировать, когда эффект срабатывает, передавая зависимости.

useEffect(() => {
  document.title = `Вы нажали ${count} раз`;
}, [count]);

useRef — хранит изменяемое значение, которое не вызывает перерисовку, часто используется для доступа к DOM.
useCallback — мемоизирует функцию, чтобы не создавать её заново при каждом рендере, полезно для оптимизации.
useMemo — мемоизирует вычисленное значение, чтобы не пересчитывать его без необходимости.
useLayoutEffect — похож на useEffect, но вызывается синхронно после всех изменений DOM, полезен для измерений и синхронизации.

Пример с несколькими хуками:

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

  useEffect(() => {
    prevCountRef.current = count;
  });

  const increment = useCallback(() => setCount(c => c + 1), []);

  const doubled = useMemo(() => count * 2, [count]);

  return (
    <div>
      <p>Текущий: {count}, предыдущий: {prevCountRef.current}</p>
      <p>Удвоенный: {doubled}</p>
      <button onClick={increment}>Увеличить</button>
    </div>
  );
}

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

Расскажи про жизненный цикл компонента React и хуки (useEffect, useState, useRef, useCallback, useMemo, useLayoutEffect и др.)