Frontend Academy · Урок

Основы useEffect: зависимости и очистка

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

«Основы useEffect: зависимости и очистка» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое useEffect?

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

Базовый синтаксис

useEffect(effect, deps?). Функция эффекта по умолчанию выполняется после каждого рендера. Передайте массив зависимостей, чтобы управлять моментом её запуска.

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    console.log('Ran after every render');
  });
}

Массив зависимостей управляет запуском эффекта

Пустой массив []: запустить один раз после монтирования. Непустой массив [a, b]: запускать при изменении a или b. Без массива: запускать после каждого рендера (что редко бывает нужно).

// Run once on mount:
useEffect(() => {
  fetchInitialData();
}, []);

// Run when userId changes:
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Run after every render (usually a bug):
useEffect(() => {
  trackPageView();
});

Функция очистки

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

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

  // Cleanup: remove listener when effect re-runs or component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Устаревшие замыкания в зависимостях

Эффекты замыкают значения, на которые они ссылаются, в момент создания. Если Вы читаете значение состояния или свойства внутри эффекта, но не указываете его среди зависимостей, Вы увидите устаревшее значение. Правило exhaustive-deps ESLint выявляет эту проблему.

Правило exhaustive-deps ESLint

Правило ESLint react-hooks/exhaustive-deps предупреждает, если Вы пропустили зависимости эффекта. Почти всегда правильно следовать его рекомендациям — устаревшие зависимости приводят к ошибкам.

useEffect и useLayoutEffect

useEffect срабатывает после отрисовки браузером. useLayoutEffect срабатывает синхронно после изменений DOM, но до отрисовки. Используйте useLayoutEffect для чтения размеров DOM, чтобы избежать визуального мерцания.

Несколько эффектов

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

// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
  const sub = wsClient.subscribe(onMessage);
  return () => sub.unsubscribe();
}, []);

Состояния гонки — флаг ignore

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

useEffect(() => {
  let ignore = false;

  async function load() {
    const data = await fetchUser(userId);
    if (!ignore) setUser(data); // only update if not cleaned up
  }

  load();
  return () => { ignore = true; };
}, [userId]);

Двойной запуск эффекта в строгом режиме

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

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

Не используйте useEffect, чтобы: 1) выводить состояние из свойств (вычисляйте его во время рендеринга), 2) сбрасывать состояние при изменении свойств (используйте свойство-ключ), 3) безусловно обновлять состояние (это вызывает циклы). Если сомневаетесь, спросите себя: реагирует ли этот код на событие пользователя или на внешнюю систему?

Быстрая проверка

Когда выполняется функция очистки useEffect?

Повторение: useEffect

Побочные эффекты выполняются после рендеринга. Пустой массив зависимостей = один раз при монтировании. Массив зависимостей = при определённых изменениях. Возвращайте функцию очистки, чтобы предотвращать утечки. Используйте несколько эффектов для разделения независимых задач. Флаг ignore предотвращает устаревшие ответы на запросы. Строгий режим запускает эффекты дважды, чтобы проверить очистку. Не используйте useEffect для производных значений или состояния, которое можно вычислить во время рендеринга.

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

Урок «Основы useEffect: зависимости и очистка» бесплатный?

Да — полный текст урока «Основы useEffect: зависимости и очистка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основы useEffect: зависимости и очистка»?

Запускайте побочные эффекты после рендера, управляйте их повторным запуском массивом зависимостей и возвращайте функцию очистки, чтобы избежать утечек памяти. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Основы useEffect: зависимости и очистка»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy