Какой этап жизненного цикла классового компонента заменяет hook useEffect?

Соответствие useEffect этапам жизненного цикла классовых компонентов

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

Основные соответствия

1. componentDidMount + componentDidUpdate

Наиболее прямое соответствие — это комбинация двух методов. useEffect без второго аргумента (массива зависимостей) выполняется после каждого рендера, подобно:

• componentDidMount — после первого рендера
• componentDidUpdate — после каждого обновления

// Классовый компонент
class ExampleClass extends React.Component {
  componentDidMount() {
    console.log('Монтирование или обновление');
    this.updateData();
  }
  
  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      console.log('Обновился пропс id');
      this.updateData();
    }
  }
  
  updateData() {
    // Логика эффекта
  }
}

// Функциональный компонент с useEffect
function ExampleFunction({ id }) {
  useEffect(() => {
    console.log('Монтирование или обновление id');
    updateData();
  }, [id]); // Зависимость от id
}

2. componentWillUnmount

Очистка эффектов в useEffect возвращает функцию, которая выполняется перед размонтированием компонента, аналогично componentWillUnmount.

// Классовый компонент
class TimerClass extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.tick();
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.timerID); // Очистка
  }
}

// Функциональный компонент
function TimerFunction() {
  useEffect(() => {
    const timerID = setInterval(() => {
      tick();
    }, 1000);
    
    return () => {
      clearInterval(timerID); // Функция очистки
    };
  }, []);
}

3. shouldComponentUpdate

Хотя прямого аналога нет, для оптимизации ререндеров в функциональных компонентах используют:

• React.memo для мемоизации всего компонента
• useMemo для мемоизации значений
• useCallback для мемоизации функций

Ключевые отличия и преимущества useEffect

Объединение логики

Вместо разделения логики между разными методами жизненного цикла, useEffect позволяет держать связанный код вместе:

// Плохо в классах: логика разделена
class DataFetcher extends React.Component {
  componentDidMount() {
    this.fetchData();
    this.setupSubscription();
  }
  
  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      this.fetchData();
    }
  }
  
  componentWillUnmount() {
    this.cleanupSubscription();
  }
  
  // Методы fetchData, setupSubscription, cleanupSubscription
}

// Хорошо с useEffect: связанная логика вместе
function DataFetcher({ id }) {
  useEffect(() => {
    fetchData();
    setupSubscription();
    
    return () => {
      cleanupSubscription();
    };
  }, [id]); // Все зависимости явно указаны
}

Множество эффектов

В классовых компонентах каждая логика эффекта должна быть в одном методе. С useEffect можно разделять несвязанные эффекты:

function Component() {
  // Отдельный эффект для подписки
  useEffect(() => {
    const subscription = props.source.subscribe();
    return () => subscription.unsubscribe();
  }, [props.source]);
  
  // Отдельный эффект для документа
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  // Нет ограничения на количество эффектов
}

Синхронизация vs жизненный цикл

Важно понять философскую разницу:

• Классы: "Выполни этот код при монтировании, затем при обновлении, затем при размонтировании"
• useEffect: "Синхронизируй этот побочный эффект с текущими пропсами и состоянием"

Практические паттерны использования

Пустой массив зависимостей — только componentDidMount

useEffect(() => {
  // Выполнится один раз при монтировании
  console.log('Компонент смонтирован');
  
  return () => {
    // Выполнится при размонтировании
    console.log('Компонент размонтирован');
  };
}, []); // Пустой массив = нет зависимостей

Массив с зависимостями — выборочные обновления

useEffect(() => {
  // Выполнится при монтировании и при изменении userId или projectId
  fetchUserData(userId, projectId);
}, [userId, projectId]); // Явные зависимости

Без массива зависимостей — после каждого рендера

useEffect(() => {
  // Выполнится после КАЖДОГО рендера (осторожно с производительностью!)
  document.title = `Вы нажали ${count} раз`;
}); // Нет второго аргумента

Важные нюансы

1. Тайминги: useEffect выполняется после отрисовки компонента и коммита в DOM, аналогично componentDidMount и componentDidUpdate.

2. useLayoutEffect: Для эффектов, которые должны выполниться синхронно после рендера, но перед отрисовкой браузером, используется useLayoutEffect (аналог поведения componentDidMount и componentDidUpdate в классах).

3. Асинхронные эффекты: В useEffect нельзя напрямую использовать async/await, нужно создавать внутреннюю асинхронную функцию:

useEffect(() => {
  async function fetchData() {
    const result = await api.getData();
    setData(result);
  }
  
  fetchData();
}, []);

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