> Какой хук в React соответствует поведению componentDidMount и componentWillUnmount (React)

Короткий ответ

useEffect с пустым массивом зависимостей [] соответствует поведению componentDidMount, а его cleanup-функция - componentWillUnmount. Это стандартный способ работы с жизненным циклом в функциональных компонентах React. Важно помнить, что в строгом режиме React вызывает эффект и cleanup дважды для обнаружения побочных эффектов.

Подробное объяснение

В классовых компонентах React жизненный цикл управляется через методы componentDidMount, componentDidUpdate и componentWillUnmount. В функциональных компонентах эту роль выполняет хук useEffect. Когда передаётся пустой массив зависимостей, эффект выполняется только один раз после монтирования компонента - это аналог componentDidMount. Возвращаемая из useEffect функция (cleanup) вызывается при размонтировании компонента - это аналог componentWillUnmount.

Ключевое отличие: useEffect с [] не полностью идентичен componentDidMount, так как в строгом режиме React (StrictMode) эффект запускается дважды в development для детекции проблем. Также cleanup выполняется перед каждым повторным запуском эффекта, если зависимости меняются, но с [] этого не происходит.

На практике

На практике useEffect с [] используется для:

• подписки на внешние события (WebSocket, resize, scroll)
• начальной загрузки данных с API
• установки таймеров или интервалов
• интеграции с библиотеками, не управляемыми React

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

Пример кода

JSX
import { useEffect } from 'react';

function ChatComponent({ roomId }) {
  useEffect(() => {
    // componentDidMount - подписка на WebSocket
    const socket = new WebSocket(`wss://chat.example.com/${roomId}`);
    
    socket.onmessage = (event) => {
      console.log('Новое сообщение:', event.data);
    };

    // componentWillUnmount - отписка и закрытие соединения
    return () => {
      socket.close();
      console.log('WebSocket соединение закрыто');
    };
  }, []); // пустой массив - эффект выполняется один раз

  return <div>Чат комната {roomId}</div>;
}

Как отвечать на собеседовании

Начни с прямого ответа: useEffect с [] и cleanup-функция. Затем объясни разницу между классовым и функциональным подходом. Упомяни StrictMode и его влияние на двойной вызов. Приведи примеры типичных use cases: подписки, таймеры, загрузка данных. Покажи понимание, что useEffect - это не точная копия lifecycle-методов, а более гибкий инструмент, объединяющий mount, update и unmount в одном API.

Что проверяет интервьюер

Интервьюер проверяет:

• понимание жизненного цикла React в функциональных компонентах
• знание правильного использования useEffect и его зависимостей
• осознание необходимости cleanup-функций для предотвращения утечек
• способность объяснить разницу между классовым и функциональным подходами
• знание особенностей StrictMode

Типичные ошибки

• Забывают про cleanup-функцию, что приводит к утечкам памяти
• Путают useEffect с useLayoutEffect для синхронных операций
• Не учитывают StrictMode и двойной вызов в development
• Используют непустой массив зависимостей, когда нужен только mount/unmount
• Пытаются использовать useEffect как точную замену componentDidMount, не понимая его асинхронной природы