Хук useEffect — ReactJS

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

Хук useEffect принимает функцию в качестве аргумента, которая называется функцией «эффект». Эта функция вызывается после рендеринга компонента и может использоваться для выполнения таких задач, как выполнение вызовов API, настройка подписок или обновление модели DOM. Функция эффекта также может возвращать функцию очистки, которая вызывается перед размонтированием компонента или повторным запуском эффекта.

Вот пример того, как использовать хук useEffect для вызова API и обновления состояния компонента с помощью ответа:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

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

Вот еще один пример того, как вы можете использовать хук useEffect для настройки подписки и ее очистки при размонтировании компонента:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
}

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

В результате компонент будет отображать текущий счетчик, который будет увеличиваться каждую секунду, пока компонент не будет размонтирован.