Ответ
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>;
}
Важно:
- Без зависимостей эффект выполняется после каждого рендера.
- Пустой массив
[]
— только при монтировании. - Указанные зависимости — при их изменении.