Как с помощью useEffect воспроизвести поведение componentDidMount, componentDidUpdate и componentWillUnmount?

Соответствие useEffect методам жизненного цикла

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

componentDidMount

Для воспроизведения поведения componentDidMount (выполнение кода один раз после монтирования компонента) используется useEffect с пустым массивом зависимостей:

useEffect(() => {
  // Код выполняется один раз после монтирования
  fetchData();
}, []);

componentDidUpdate

Для имитации componentDidUpdate (выполнение кода при изменении определённых пропсов или состояния) укажите зависимости в массиве:

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

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

componentWillUnmount

Для очистки ресурсов при размонтировании компонента (аналог componentWillUnmount) верните функцию из useEffect:

useEffect(() => {
  const subscription = subscribeToUpdates();
  return () => {
    // Очистка при размонтировании
    subscription.unsubscribe();
  };
}, []);

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

Вывод

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