`useEffect` — это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как `componentDidMount`, `componentDidUpdate` и `componentWillUnmount`.

Синтаксис:

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

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

Примеры использования:

Запуск эффекта один раз

Чтобы выполнить эффект один раз после первого рендеринга (аналог `componentDidMount` в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

Выполнение при изменении зависимостей
Чтобы выполнить эффект при изменении определённых значений:

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

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = `Вы нажали ${count} раз`;
}, [count]); // Зависимости

Очистка эффектаПример использования функции очистки:

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

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

Feb. 26, 2024, easyoffer