useEffect в React: побочные эффекты и подписки

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

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

useEffect выполняется после того, как компонент отрисован. Он позволяет вам производить действия, которые не должны блокировать рендеринг, такие как асинхронные запросы или обновления, которые должны происходить после рендера.

Основной синтаксис

useEffect(() => {
  // Код побочного эффекта
}, [dependencies]);

Первый аргумент — это функция с побочным эффектом, которая будет выполнена после рендера компонента.
Второй аргумент — массив зависимостей. Если массив зависимостей не передан, эффект выполнится после каждого рендера. Если массив пустой, эффект выполнится только один раз — при монтировании компонента.

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

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  // Запускаем таймер при монтировании компонента
  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // Очистка эффекта, когда компонент размонтирован
    return () => clearInterval(intervalId);
  }, []); // Пустой массив — эффект выполнится только один раз

  return (
    <div>
      <p>Прошло времени: {seconds} секунд</p>
    </div>
  );
}

Когда выполняется useEffect?

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

Пример с зависимостями

import { useState, useEffect } from "react";

function FetchData() {
  const [data, setData] = useState(null);
  const [url, setUrl] = useState("https://api.example.com/data");

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [url]); // Хук сработает, когда изменится значение `url`

  return (
    <div>
      <button onClick={() => setUrl("https://api.example.com/new-data")}>
        Загрузить новые данные
      </button>
      <p>{data ? JSON.stringify(data) : "Загрузка..."}</p>
    </div>
  );
}

массив не указан: эффект запускается при каждом рендере
пустой массив: эффект запускается только при маунте
массив с элементами: эффект запускается при изменении любого элемента

Очистка эффекта

Если хук требует очистки (например, при работе с подписками или таймерами), можно вернуть функцию из useEffect:

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log("Таймер работает...");
  }, 1000);

  return () => clearInterval(intervalId); // Очистка таймера
}, []);

Использование useEffect:

useEffect позволяет обрабатывать побочные эффекты в функциональных компонентах, улучшая управление состоянием и ресурсами в React-приложениях.

Связанные статьи

Решать React задачи

Дальше

Содержание

Как работает useEffect?Основной синтаксис Пример использования useEffect Когда выполняется useEffect?Пример с зависимостями Очистка эффекта Связанные статьи