Какие типичные проблемы встречаются при работе с WebSocket внутри useEffect?

WebSocket — это постоянное соединение, а useEffect в React может запускаться многократно. Если не управлять жизненным циклом сокета правильно, появляются утечки, дублирующиеся сообщения и лишние соединения на сервере.

Основные проблемы

• Отсутствие cleanup: сокет остаётся открытым после размонтирования компонента.
• Зависимости эффекта: если в deps попадает изменяющееся значение, сокет пересоздаётся на каждый ререндер.
• StrictMode в React 18: эффект вызывается дважды, что приводит к двум соединениям.
• Дублирование обработчиков: повторное добавление onmessage без удаления старого.
• Нет логики reconnect при обрыве соединения.

Пример правильного подхода

useEffect(() => {
  const ws = new WebSocket('wss://api.example.com');
  ws.onmessage = (e) => setMessages(prev => [...prev, e.data]);
  ws.onerror = (e) => console.error(e);

  return () => {
    ws.onmessage = null;
    ws.onerror = null;
    ws.close();
  };
}, []); // пустые deps — соединение создаётся один раз

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

Итог

WebSocket в useEffect стоит применять с пустыми зависимостями и обязательным cleanup, иначе получите утечки и дублирующиеся соединения. Для сложной логики лучше вынести сокет в отдельный хук или контекст.