React: Зачем нужен хук useEffect и в каких случаях в него нужно передавать массив зависимостей?

Хук useEffect — один из ключевых инструментов в React, который позволяет выполнять побочные эффекты (side effects) в функциональных компонентах. Под побочными эффектами понимаются любые действия, которые выходят за рамки рендеринга: запросы к API, подписки на события, работа с таймерами, изменение заголовка страницы, взаимодействие с DOM и многое другое.

До появления хуков подобная логика размещалась в методах жизненного цикла классовых компонентов: componentDidMount, componentDidUpdate и componentWillUnmount. useEffect объединяет все три сценария в одном месте.

**Базовый синтаксис:**

useEffect(() => {
// побочный эффект
return () => {
// функция очистки (опционально)
};
}, [зависимости]);

**Массив зависимостей и его варианты:**

1. **Без массива зависимостей** — эффект выполняется после каждого рендера компонента. Это поведение аналогично componentDidUpdate. Используется редко, так как может приводить к бесконечным циклам.

2. **Пустой массив `[]`** — эффект выполняется только один раз, после первого монтирования компонента. Аналог componentDidMount. Подходит для однократных операций: загрузки начальных данных, установки подписок.

3. **Массив с зависимостями `[a, b]`** — эффект выполняется при первом рендере, а затем только тогда, когда изменится хотя бы одна из перечисленных зависимостей. Зависимостями могут быть props, state или любые переменные, используемые внутри эффекта.

**Когда передавать зависимости:**
— Если внутри useEffect используются переменные из области видимости компонента (state, props, функции), их обязательно нужно добавить в массив зависимостей. Это предотвращает использование устаревших значений (stale closure).
— Если эффект должен реагировать на изменение конкретного значения — добавьте его в массив.
— Если эффект должен выполниться только один раз — используйте пустой массив.

**Функция очистки:**
UseEffect может возвращать функцию очистки, которая вызывается перед следующим запуском эффекта или при размонтировании компонента. Это важно для отмены запросов, удаления обработчиков событий и очистки таймеров.

**Пример:**

useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
}, [props.source]);

Правильное использование массива зависимостей — залог предсказуемого поведения компонента и отсутствия утечек памяти.