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

Что такое useEffect и зачем он нужен?

useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты — это операции, которые влияют на внешний мир или зависят от него, например, запросы к API, подписки на события, работа с таймерами или изменение DOM вручную. В классовых компонентах для этого использовались методы жизненного цикла, такие как componentDidMount, componentDidUpdate и componentWillUnmount. useEffect объединяет их в одном API, делая код более чистым и предсказуемым.

Как работает useEffect?

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

Примеры использования

Рассмотрим простой пример: загрузка данных с сервера при монтировании компонента.

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // эффект запускается при изменении userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

В этом примере useEffect выполняет запрос к API при монтировании и каждый раз, когда меняется userId. Если бы мы не указали зависимость, запрос выполнялся бы при каждом рендере, что неэффективно.

Другой пример — подписка на событие и её очистка:

import React, { useEffect } from 'react';

function WindowSizeTracker() {
  useEffect(() => {
    const handleResize = () => console.log(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // пустой массив — эффект только при монтировании

  return <div>Resize the window</div>;
}

Функция очистки удаляет обработчик события, предотвращая утечки памяти.

Вывод

useEffect — это мощный инструмент для управления побочными эффектами в функциональных компонентах React. Он делает код более декларативным и уменьшает дублирование, заменяя несколько методов жизненного цикла одним хуком. Используйте его для всех операций, которые не связаны напрямую с рендерингом, и всегда указывайте правильные зависимости, чтобы избежать неожиданного поведения.