Когда срабатывает UseEffect с точки зрения массива зависимостей?

Механизм работы useEffect и массива зависимостей

useEffect — это один из наиболее важных и часто используемых хуков в React. Его поведение напрямую зависит от массива зависимостей, который передается вторым аргументом. С точки зрения этого массива, момент срабатывания эффекта можно разделить на три основных случая.

1. useEffect без массива зависимостей (запуск после каждого рендера)

Если второй аргумент не предоставлен, эффект выполняется после каждого завершенного рендера компонента, включая первый.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Этот код выполнится после каждого рендера компонента
    console.log('Effect ran after render');
  }); // Нет массива зависимостей

  return <div>Hello World</div>;
}

Механизм работы:

• Компонент монтируется или получает новые props/state.
• React выполняет рендер компонента (вычисляет, что нужно отрисовать).
• После того как рендер завершен и изменения уже применены к DOM, React запускает эффект.
• Этот цикл повторяется для каждого следующего рендера.

2. useEffect с пустым массивом зависимостей (запуск только после монтирования)

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

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Этот код выполнится только один раз, после первоначального монтирования
    console.log('Effect ran on mount (like componentDidMount)');
    // Здесь часто размещают запросы к API, подписки на события
  }, []); // Пустой массив зависимостей

  return <div>Hello World</div>;
}

Механизм работы:

• Компонент монтируется в DOM (первый рендер).
• После завершения рендера React запускает эффект.
• При любых следующих рендерах (изменение props, state) React не будет запускать этот эффект, потому что массив зависимостей пуст и, с точки зрения React, "ничего не изменилось".

3. useEffect с указанными зависимостями (запуск при их изменении)

Если массив содержит значения (props, state, другие переменные), эффект выполняется после первого монтирования и затем после каждого рендера, в котором хотя бы одна из этих зависимостей изменилась.

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

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Этот код выполнится:
    // 1. После первоначального монтирования
    // 2. После каждого рендера, где userId или data изменились
    console.log('Fetching data for user:', userId);
    fetchData(userId);
  }, [userId, data]); // Массив с зависимостями: userId и data

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

Механизм работы и алгоритм сравнения:

React использует строгое сравнение (===) для каждой зависимости в массиве между предыдущим и текущим рендерами.

1. После первого рендера: Массив зависимостей сохранен. Эффект запускается.
2. При следующем рендере: React создает новый массив с текущими значениями зависимостей.
3. Сравнение: React сравнивает каждый элемент нового массива с соответствующим элементом из массива предыдущего рендера.

    * Если все элементы равны (`===`), эффект **НЕ запускается**.
    * Если хотя бы один элемент не равен, эффект **запускается**.

1. Очистка: Если эффект должен запуститься, сначала выполняется функция очистки (если она была возвращена из предыдущего запуска эффекта), затем выполняется новый эффект.

Ключевые правила и лучшие практики:

• Все зависимости должны быть внутри массива. Если эффект использует переменную из внешней области видимости (props, state, значения из других хуков), она должна быть указана в массиве. Это предотвращает использование "застывших" (stale) значений.
• Пустой массив — это осознанное решение. Используйте его только для эффектов, которые действительно должны запускаться один раз (например, подписка на внешнее событие). Не используйте пустой массив, чтобы "запретить" запуск эффекта, если он логически зависит от изменяющихся данных.
• Изменение объектов и функций. Поскольку React использует ===, передача нового объекта или функции (например, созданных внутри компонента при каждом рендере) приведет к запуску эффекта каждый раз, даже если их содержимое семантически одинаково. Для оптимизации используют useMemo и useCallback.
• Нельзя "условиться" внутри массива. Массив зависимостей — это статический список. Нельзя использовать условные операторы (if) внутри него. Все зависимости должны быть указаны явно.

Таким образом, массив зависимостей — это не просто список "триггеров", а точный механизм контроля, который позволяет React оптимизировать выполнение эффектов, избегая лишних запусков и гарантируя, что эффект всегда работает с актуальными данными. Правильное его использование — основа для создания эффективных, надежных и безбаговых React-компонентов.