Использование хука useEffect в функциональных компонентах React

Хук useEffect в библиотеке React имеет одну основную цель - выполнение побочных эффектов в функциональных компонентах. Он пришёл на замену методам жизненного цикла в классовых компонентах, таким как componentDidMount, componentDidUpdate и componentWillUnmount.

Как работает useEffect

Хук useEffect вызывается после рендеринга компонента. Это значит, что после того, как компонент отрисован на экране, React запускает функцию, переданную в useEffect. Это удобно для операций, которые могут быть отложены до того момента, когда пользователь увидит обновлённый UI. Например, получение данных по сети или подписка на какие-то события.

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

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

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

  // Аналогично componentDidMount и componentDidUpdate:
  useEffect(() => {
    // Обновляем заголовок документа, используя API браузера
    document.title = `Вы нажали ${count} раз`;
  });

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Жми на меня</button>
    </div>
  );
}

В этом примере, useEffect вызывается после каждого рендеринга функционального компонента Example. Мы обновляем заголовок документа, отражая текущее количество кликов по кнопке.

Заключение

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