useEffect в React что это, как работает и как избежать ошибок

Если вы начали изучать React, то наверняка уже сталкивались с useEffect. Для многих разработчиков этот хук становится первым серьёзным испытанием: компонент начинает бесконечно перерендериваться, запросы к API выполняются несколько раз, а массив зависимостей кажется чем-то загадочным.

На самом деле useEffect не является сложным инструментом. Большинство проблем возникает из-за неправильного понимания того, для чего он был создан и какие задачи должен решать. В этой статье подробно разберём, как работает useEffect, когда его действительно необходимо использовать, какие ошибки встречаются чаще всего и почему в современных версиях React разработчики стараются применять его значительно реже.

Что нужно знать про useEffect

useEffect - это хук React для выполнения побочных эффектов после завершения рендера компонента. Он используется для взаимодействия с внешним миром: загрузки данных с сервера, работы с браузерными API, подписок на события, таймеров и сторонних библиотек.

Главное правило, которое рекомендует команда React, звучит очень просто:

Если задачу можно решить без useEffect, её лучше решить без useEffect.

Именно нарушение этого принципа становится причиной большинства проблем в React-приложениях.

Что такое useEffect

useEffect появился вместе с React Hooks и заменил несколько методов жизненного цикла классовых компонентов: componentDidMount, componentDidUpdate и componentWillUnmount.

Базовый синтаксис выглядит следующим образом:

import { useEffect } from 'react';

useEffect(() => {
  // логика эффекта

  return () => {
    // очистка ресурсов
  };
}, [dependencies]);

Хук принимает функцию эффекта и массив зависимостей. После завершения рендера React анализирует массив зависимостей и определяет, требуется ли повторное выполнение эффекта.

Важно понимать, что useEffect не участвует в построении интерфейса. Он выполняется только после того, как React завершил обновление DOM.

Зачем нужен useEffect

В React компонент должен оставаться максимально предсказуемым и описывать только пользовательский интерфейс. Однако реальные приложения постоянно взаимодействуют с внешним окружением.

Например, необходимо загрузить данные пользователя с сервера, подписаться на изменение размеров окна браузера, открыть WebSocket-соединение или сохранить настройки в localStorage. Все подобные операции относятся к побочным эффектам и выполняются через useEffect.

Именно поэтому useEffect часто называют инструментом синхронизации React-компонента с внешним миром.

Как работает массив зависимостей

Наибольшее количество ошибок связано именно с массивом зависимостей.

Если второй аргумент отсутствует:

useEffect(() => {
  console.log('render');
});

эффект будет выполняться после каждого рендера компонента.

Если используется пустой массив:

useEffect(() => {
  console.log('mounted');
}, []);

эффект выполнится только один раз после монтирования компонента.

Если указать зависимости:

useEffect(() => {
  console.log(userId);
}, [userId]);

то React будет повторно запускать эффект только при изменении значения userId.

Под капотом React сравнивает текущее и предыдущее состояние каждой зависимости и принимает решение о повторном выполнении эффекта.

Как React выполняет useEffect

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

Рендер компонента
        ↓
Обновление DOM
        ↓
Выполнение useEffect
        ↓
Изменение зависимости
        ↓
Очистка предыдущего эффекта
        ↓
Повторное выполнение useEffect

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

Почему возникает бесконечный цикл

Практически каждый React-разработчик хотя бы один раз писал следующий код:

useEffect(() => {
  setCount(count + 1);
});

Проблема заключается в том, что изменение состояния вызывает новый рендер, а новый рендер снова запускает эффект. В результате образуется бесконечная цепочка обновлений.

Обычно React сообщает об ошибке:

Maximum update depth exceeded

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

Самые распространённые ошибки

Одной из наиболее частых проблем является использование устаревших значений внутри эффекта:

useEffect(() => {
  console.log(userId);
}, []);

В этом примере userId используется внутри эффекта, но отсутствует в массиве зависимостей. Подобная ситуация приводит к так называемым stale closures.

Ещё одна распространённая ошибка - отсутствие функции очистки:

useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

В результате обработчик события остаётся в памяти даже после удаления компонента.

Правильная реализация выглядит так:

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

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

useEffect(async () => {
  const data = await fetchData();
}, []);

Однако функция эффекта не может возвращать Promise. Поэтому асинхронную логику необходимо выносить во внутреннюю функцию.

Как правильно выполнять запросы к API

При работе с сервером важно учитывать возможность отмены запроса:

useEffect(() => {
  const controller = new AbortController();

  async function loadUser() {
    const response = await fetch('/api/user', {
      signal: controller.signal
    });

    const data = await response.json();
    setUser(data);
  }

  loadUser();

  return () => {
    controller.abort();
  };
}, []);

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

Когда useEffect использовать не нужно

Одной из самых серьёзных ошибок считается использование useEffect для вычислений.

Например:

useEffect(() => {
  setFullName(`${name} ${surname}`);
}, [name, surname]);

Подобный код создаёт лишний рендер и усложняет компонент.

Гораздо правильнее написать:

const fullName = `${name} ${surname}`;

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

Ошибки из реальных проектов

В коммерческой разработке часто встречается следующий код:

function Component() {
  const fetchData = () => {
    console.log('request');
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]);
}

На первый взгляд код выглядит корректно. Однако функция создаётся заново при каждом рендере, поэтому React считает её новой зависимостью и запускает эффект повторно.

Решить проблему можно с помощью useCallback:

const fetchData = useCallback(() => {
  console.log('request');
}, []);

useEffect(() => {
  fetchData();
}, [fetchData]);

Другой распространённой проблемой являются гонки запросов. Если пользователь быстро переключает страницы, старый запрос может завершиться позже нового и перезаписать актуальные данные.

Практический пример подписки

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>{width}px</div>;
}

Практический пример загрузки данных

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(setUser);
  }, [userId]);

  return (
    <div>
      {user ? user.name : 'Загрузка...'}
    </div>
  );
}

Почему useEffect выполняется два раза

После выхода React 18 многие разработчики решили, что столкнулись с ошибкой.

На самом деле в режиме StrictMode React намеренно выполняет эффекты дважды. Это позволяет обнаружить отсутствие очистки ресурсов, утечки памяти и нарушения жизненного цикла компонентов.

Важно понимать, что подобное поведение наблюдается только в режиме разработки и отсутствует в production-сборке.

useEffect и useLayoutEffect

Эти хуки решают похожие задачи, однако отличаются моментом выполнения.

В большинстве случаев следует использовать именно useEffect.

Современный подход в React 18 и React 19

За последние несколько лет отношение к useEffect существенно изменилось.

Если раньше через него реализовывали практически всю работу с сервером, то сегодня команда React рекомендует использовать более специализированные инструменты. Многие задачи успешно решаются с помощью React Query, SWR, Suspense, Server Components и нового API use().

Из практики разработки крупных React-проектов можно отметить, что большинство ошибок, связанных с useEffect, возникает не из-за сложности самого хука, а из-за попыток использовать его как механизм управления состоянием. После появления React Query и Server Components количество useEffect в современных проектах часто сокращается в несколько раз.

Если задача может быть решена без useEffect, скорее всего, именно так и следует поступить.

Часто задаваемые вопросы

Что такое stale closures?

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

Почему ESLint требует добавить зависимости?

Плагин eslint-plugin-react-hooks помогает избежать ошибок жизненного цикла и устаревших замыканий. В большинстве случаев его предупреждения следует исправлять.

Можно ли вызывать useEffect внутри условия?

Нет. Все хуки React должны вызываться только на верхнем уровне компонента.

Чем useEffect отличается от useMemo?

useEffect предназначен для побочных эффектов, а useMemo используется для мемоизации вычислений.

Можно ли использовать несколько useEffect?

Да. Более того, это считается хорошей практикой.

Итог

useEffect - это инструмент синхронизации React-компонентов с внешним миром. Он необходим для работы с API, подписками, браузерными событиями и другими побочными эффектами.

Большинство проблем возникает не из-за самого хука, а из-за попытки использовать его там, где он не нужен. Если помнить о назначении useEffect, корректно указывать зависимости и очищать внешние ресурсы, можно избежать практически всех типичных ошибок.

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