Какие параметры принимает UseEffect на вход?

Параметры хука useEffect

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

1. Функция эффекта (effect function) — основной и обязательный параметр.
2. Массив зависимостей (dependencies array) — опциональный параметр, который контролирует, когда эффект должен выполняться.

1. Функция эффекта (Effect Function)

Это функция, которая содержит код побочного эффекта. Она выполняется после того, как React полностью завершит рендеринг компонента и обновит DOM. Это гарантирует, что эффекты не блокируют процесс отрисовки интерфейса.

useEffect(() => {
  // Код побочного эффекта находится здесь
  console.log('Эффект выполнен!');
});

Функция эффекта может возвращать функцию очистки (cleanup function). Это опционально, но критически важно для эффектов, которые создают ресурсы, требующие освобождения (например, подписки на события, интервалы, запросы к API).

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Тик!');
  }, 1000);

  // Возвращаем функцию очистки
  return () => {
    clearInterval(timerId);
    console.log('Интервал очищен!');
  };
});

Функция очистки выполняется:

• Перед каждым повторным выполнением эффекта (если массив зависимостей изменился).
• Перед удалением компонента из DOM (при unmounting).

2. Массив зависимостей (Dependencies Array)

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

useEffect(() => {
  // Эффект зависит от значения 'someValue'
  console.log('Значение изменилось:', someValue);
}, [someValue]); // Массив зависимостей содержит 'someValue'

Массив зависимостей управляет поведением эффекта, создавая три основных режима работы:

A. Эффект без массива зависимостей

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

useEffect(() => {
  // Выполняется после каждого рендера (как монтирования, так и обновления)
  fetchData();
}); // Массив зависимостей отсутствует

B. Эффект с пустым массивом зависимостей

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

useEffect(() => {
  // Выполняется только при монтировании компонента
  console.log('Компонент монтирован!');
}, []); // Пустой массив зависимостей

C. Эффект с указанными зависимостями

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

const [count, setCount] = useState(0);
const [query, setQuery] = useState('');

useEffect(() => {
  // Выполняется только при изменении 'count' или 'query'
  api.search(query, count);
}, [count, query]); // Массив зависимостей содержит 'count' и 'query'

Ключевые правила и рекомендации

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

useEffect(() => {
  if (isActive) {
    // Условное выполнение логики эффекта
    subscribe();
    return () => unsubscribe();
  }
}, [isActive]); // Зависимость управляет эффектом

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