useEffect

useEffect(колбекфункция, [массив зависимостей])

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

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

Запросы к API.
Подписка на события.
Изменение DOM вручную.
Установка таймеров (setTimeout, setInterval).

Что делает useEffect?

useEffect принимает два аргумента:
1. Функция эффекта — код, который выполняется при определённых условиях (например, после рендеринга).
2. Массив зависимостей (опционально) — список значений, от которых зависит выполнение эффекта. Если массив пустой или не указан, эффект выполняется по-разному.

Когда использовать useEffect?

Для загрузки данных с сервера.
Для подписки на события (например, WebSocket или слушатели событий).
Для работы с таймерами.
Для синхронизации состояния с внешними системами.

Пример кода

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

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    document.title = `Счётчик: ${count}`; // Обновляем заголовок страницы
  }, [count]); // Выполняется при изменении count

  return (
    <button onClick={() => setCount(count + 1)}>
      Увеличить: {count}
    </button>
  );
}

export default Counter;

Важно

Порядок выполнения: Эффект запускается после рендеринга, чтобы не блокировать интерфейс.
Зависимости: Указывайте в массиве все внешние значения, которые используются внутри эффекта, иначе могут возникнуть ошибки (линтеры вроде ESLint помогают это отслеживать).
Очистка: Если эффект создаёт подписку или таймер, обязательно возвращайте функцию очистки, чтобы избежать утечек памяти.