Как useEffect взаимодействует с жизненным циклом компонента React

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

1. componentDidMount - если передать пустой массив зависимостей:

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

2. componentDidUpdate - если указать зависимости:

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

3. componentWillUnmount - возвращая функцию очистки:

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

Важно: эффекты выполняются после отрисовки компонента в DOM. Они могут срабатывать при каждом рендере, если не указаны зависимости. Для синхронных эффектов до рендера используйте useLayoutEffect.