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

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

Хук useEffect в функциональных компонентах React заменяет несколько методов жизненного цикла классовых компонентов. Когда вы передаете массив зависимостей, useEffect ведет себя как комбинация componentDidMount и componentDidUpdate.

Как это работает

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

Пример кода

import React, { useState, useEffect } from 'react';

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

  // Аналог componentDidMount + componentDidUpdate для userId
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));

    // Аналог componentWillUnmount
    return () => {
      console.log('Cleanup for userId:', userId);
    };
  }, [userId]); // Зависимость от userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

Вывод

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