Как правильно работать с побочными эффектами в React?

Что такое побочные эффекты в React?

Побочные эффекты — это операции, которые влияют на внешнюю среду или зависят от неё, например, HTTP-запросы, работа с localStorage, таймеры или подписки на события. В React такие операции нельзя выполнять напрямую во время рендера, так как это может привести к неконсистентному состоянию UI. Для этого используется хук useEffect.

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

useEffect принимает два аргумента: функцию с эффектом и массив зависимостей. Функция выполняется после каждого рендера, если зависимости изменились. Если массив пуст, эффект выполняется только один раз после монтирования компонента. Если зависимости не указаны, эффект выполняется после каждого рендера.

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // эффект выполняется при изменении userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

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

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

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(timer); // очистка
}, []);

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

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

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