React 19.2: useEffectEvent для стабильных WebSocket в чат-компонентах

[hannadev]

React 19.2 приносит хук useEffectEvent - это killer-фича для сайд-эффектов в чатах с WebSocket. Он решает боль с переподключениями из-за ненужных deps в useEffect. Теперь колбэки видят свежий стейт, но эффект не дергается на каждый чих пропсов.

Представьте чат-компонент: подключается к roomId, шлёт уведомления по теме. Без хука смена темы ломает соединение - эффект ре-раннится зря. useEffectEvent держит связь стабильной, а колбэки всегда свежие. Это упрощает жизнь с реал-тайм фичами.

Классическая боль useEffect в чатах

В чат-компоненте WebSocket подключается в useEffect по roomId. Но внутри on(‘connected’) показываем уведомку с текущей темой - light/dark. Если theme меняется, эффект ре-раннится: disconnect + connect заново. Это лаг, лишний трафик и раздражает юзеров.

Линтер орёт, если theme выкинуть из deps - stale closure, уведомка с устаревшей темой. Раньше фиксили useRef или // eslint-disable-next-line. Но это костыли, код путается. useEffectEvent чистит этот бардак: колбэк стабильный, стейт свежий, deps минимальные.

Вот типичный фейл:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // theme ломает всё
}

• Переподключение зря: theme меняется - сокет рвётся.
• Линтер-вой: без theme - warning о deps.
• Stale theme: уведомка не по теме.

useEffectEvent в действии

Хук создаёт стабильный колбэк для событий. Он не меняет identity, React его не трогает в deps. Внутри читает latest стейт - theme, isMuted, что угодно. Идеально для WebSocket: on(‘message’), on(‘connected’) без ре-рендера эффекта.

В примере с чатом: эффект по [roomId], onConnected использует свежий theme. Смена темы - уведомка обновится, сокет жив. Масштабируется на on(‘message’) с playSound, если не muted. Нет нужды в useCallback + deps everywhere.

Код становится чище:

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // всегда свежий theme
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', onConnected);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // стабильный!
}

Сравнение подходов	Классический useEffect	useEffectEvent
Deps для theme	Обязательны, ре-коннект	Не нужны, свежий стейт
Стабильность сокета	Ломается на пропсах	Только по roomId
Линтер	Warnings или disable	Чисто
Код	Костыли с ref/callback	Прямолинейно

• События WebSocket: on(‘message’), on(‘error’) - всегда latest стейт.
• Browser API: visibilitychange, resize без лишних эффектов.
• Timers: setInterval с свежими данными, без ре-сетов.

Расширенные кейсы для чат-компонентов

Допустим, чат с mute-уведомлений и звуком. isMuted в стэйте, но не хочешь ре-коннект на каждый toggle. useEffectEvent берёт onMessage: if (!isMuted) playSound(). Эффект только по roomId, listener стабильный.

Ещё сценарий: аналитика на сообщениях. Логгируем с userId, который меняется (логин/аут). Без хука - ре-ран каждый раз. С ним - лог всегда свежий, без дисконнекта. Плюс батчинг в React 19.2 усиливает производительность.

const onMessage = useEffectEvent((msg) => {
  if (!isMuted) playSound(msg);
  logAnalytics(msg, userId); // latest userId
});

Нюанс: хук только внутри эффектов, не в onClick или рендере.

• Mute/toggle: стейт меняется, звук реагирует без ре-коннекта.
• Аналитика: события с пропсами/стэтом без deps-хаоса.
• Мульти-румы: переходы без лагов на WebSocket.

useEffectEvent vs альтернативы

Когда не нужен хук

Не путай с useCallback - тот для рендеров, deps строгие. useEffectEvent чисто для событий в эффектах. Не юзай в onClick: там стейт и так свежий. Или в рендере - крашнется.

Альтернатива	Плюсы	Минусы
useRef	Доступ к latest	Мутный код, ручное трэкинг
useCallback	Стабильный колбэк	Deps всё равно нужны
// eslint-disable	Тишина линтера	Unsafe, баги подкрадутся

Правило: если событие внешнее (WebSocket, API), бери useEffectEvent. Для кликов - vanilla хэндлеры.

• useEffectEvent: socket.on, setInterval в эффекте.
• Не юзать: button onClick, render логика.
• **Edge-case: Несколько эффектов - хук на компонент-левел.

Стабильные чаты без компромиссов

useEffectEvent делает WebSocket в чатах пуленепробиваемыми - нет лишних дисконнектов, стейт свежий, линтер счастлив. React 19.2 эволюционирует эффекты под реал-тайм: от чатов к коллаборативным тулам.

Осталось копнуть для приоритетов или cacheSignal под SSR-чатов. Но для клиентских сокетов это must-have - меньше багов, быстрее рендер.