Как использовать хук useEffect в React?

useEffect позволяет выполнять побочные эффекты в функциональных компонентах.

Он принимает два аргумента:

1. Функция с кодом эффекта.
2. Массив зависимостей.

Побочные эффекты:

• Запросы данных.
• Подписки.
• Ручное изменение DOM.

// Пример использования для выполнения эффекта при монтировании компонента
useEffect(() => {
  // Код эффекта: например, получение данных с API
  console.log('Компонент монтирован. Загружаю данные...');

  // Cleanup функция (опционально)
  return () => {
    // Код для очистки ресурсов (например, отмена подписки) при размонтировании
    console.log('Компонент размонтируется. Очистка...');
  };
}, []); // Пустой массив зависимостей - эффект выполнится один раз при монтировании

// Пример использования с зависимостью
useEffect(() => {
  // Код эффекта, который зависит от значения пропса или состояния
  console.log('Значение ' + userId + ' изменилось. Обновляю данные для пользователя.');

}, [userId]); // Эффект выполнится при первом рендере и при каждом изменении userId

// Пример использования без массива зависимостей
useEffect(() => {
  // Эффект будет выполняться при каждом рендере компонента
  console.log('Компонент перерендерился.');
});

Важные моменты:

• Функция, переданная в useEffect, выполняется после рендера (или после первого рендера для пустого массива зависимостей).
• Возвращаемая из функции эффект функция (cleanup) выполняется при размонтировании компонента или перед следующим выполнением эффекта (при изменении зависимостей).
• Массив зависимостей контролирует, когда эффект должен выполняться. Пустой массив ([]) означает один раз при монтировании. Присутствие зависимостей означает, что эффект сработает при их изменении. Отсутствие массива зависимостей означает срабатывание при каждом рендере.
• Следует включать в массив зависимостей все переменные из области компонента, которые используются внутри эффекта и могут изменяться со временем.