Эффекты — это про синхронизацию

Эффект — это запасной выход из потока рендеринга React; он существует, чтобы дотянуться до системы, которую React не контролирует. Рендеринг чист: даны пропсы и состояние — ты описываешь UI, а всем остальным владеет React. Но в реальном мире есть вещи, о которых React ничего не знает: сетевые сокеты, document.title, localStorage, императивный экземпляр графика, API IntersectionObserver. Эффект — это санкционированный способ выйти за пределы рендера, тронуть эту внешнюю вещь и держать её в ногу с текущим состоянием твоего компонента.

// каноническая форма: настрой внешнюю систему, верни её разбор
useEffect(() => {
  const connection = createConnection(roomId);   // выходим за пределы React
  connection.connect();
  return () => connection.disconnect();           // разбор при очистке
}, [roomId]);                                      // ре-синхр. при изменении roomId

Читай этот массив зависимостей как «ре-синхронизируй всякий раз, когда меняется roomId», а не «запусти это, когда меняется roomId». Формулировка важна: эффект синхронизирует; он не реагирует.

Корректный эффект всегда описывает двусторонний контракт: настрой и разбери. Функция очистки — не опциональная вежливость, это половина паттерна. React может запустить твой эффект, а затем позже перезапустить его (зависимости изменились) или размонтировать компонент, и у каждой настройки должен быть парный разбор, иначе ты протекаешь. Подписка без unsubscribe, setInterval без clearInterval, обработчик события, который так и не сняли, — каждый накапливается по рендерам и перемонтированиям.

function ChatRoom({ roomId }: { roomId: string }) {
  useEffect(() => {
    const socket = new WebSocket(`wss://chat.example.com/${roomId}`);
    const onMessage = (e: MessageEvent) => console.log(e.data);
    socket.addEventListener("message", onMessage);
    return () => {
      socket.removeEventListener("message", onMessage);
      socket.close();                              // разбор точно зеркалит настройку
    };
  }, [roomId]);
  return <div>Room: {roomId}</div>;
}

В Strict Mode из React 19 эффект намеренно запускается как настройка→очистка→настройка в разработке, чтобы немедленно вскрыть отсутствующий разбор. Если твой эффект ломается при этом двойном вызове — очистка неверна; это тест делает свою работу, а не баг, который надо подавить.

Синхронизация с браузерным API — тот же паттерн, даже когда это выглядит как «просто выставить значение». Установка document.title из состояния твоего компонента — это синхронизация: document — внешняя система, и ты держишь её в ногу с состоянием React. Этому место в эффекте, и (поскольку заголовок сохраняется) в идеале он восстанавливается при очистке.

function PageTitle({ unread }: { unread: number }) {
  useEffect(() => {
    const previous = document.title;
    document.title = unread > 0 ? `(${unread}) Inbox` : "Inbox";
    return () => { document.title = previous; };   // восстановить при размонтировании
  }, [unread]);
  return null;
}

Признак того, что это настоящий эффект: цель (document.title) — не состояние React, не пропс, не JSX. Ты тянешься за пределы дерева рендера, чтобы мутировать мир. Это и есть вся лицензия на существование эффекта.

Доминирующий режим отказа: эффект, используемый для вычисления производных данных из пропсов или состояния. Это то злоупотребление, что производит большинство отчётов «мой эффект глючит». Рассуждение кажется верным — «когда меняется items или query, пересчитай filtered» — поэтому люди пишут эффект, который выставляет второе состояние. Но внешней системы здесь нет. filtered — чистая функция от items и query; вычислять её во время рендера правильно, синхронно и без багов. Версия с эффектом вносит лишний рендер, второй источник истины и окно, в котором экран показывает устаревшие данные.

// НЕВЕРНО: внешней системы нет — это производные данные в костюме эффекта
const [filtered, setFiltered] = useState<Item[]>([]);
useEffect(() => {
  setFiltered(items.filter((i) => i.name.includes(query)));
}, [items, query]);                                // лишний рендер + может показать устаревшее

// ВЕРНО: вычисли во время рендера; ни эффекта, ни второго состояния, никогда не устаревает
const filtered = items.filter((i) => i.name.includes(query));
// (оборачивай в useMemo, только если фильтр действительно дорогой)

Эвристика: прежде чем писать эффект, назови внешнюю систему, с которой он синхронизируется. «Он синхронизируется с… filtered» — это не внешняя система, это состояние React, и эффект надо удалить.