Что такое useEffect

Ответ

useEffect — это хук в React, позволяющий выполнять побочные эффекты в функциональных компонентах. Он заменяет методы жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount).

Основные случаи использования:

  • Запросы к API.
  • Подписки на события.
  • Работа с DOM.

Синтаксис:

useEffect(() => {
  // Эффект выполнится после рендера
  return () => {
    // Очистка (аналог componentWillUnmount)
  };
}, [dependencies]); // Зависимости для контроля выполнения

Пример:

import { useEffect, useState } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData);
  }, []); // Пустой массив = эффект только при монтировании

  return <div>{data ? data.message : 'Loading...'}</div>;
}

Важно:

  • Без зависимостей эффект выполняется после каждого рендера.
  • Пустой массив [] — только при монтировании.
  • Указанные зависимости — при их изменении.