Как предотвратить утечку памяти при использовании useEffect с соединениями WebSocket в React? ⇐ Javascript

[Anonymous]

Я создаю приложение для чата в реальном времени, используя React и WebSocket. У меня возникают утечки памяти, когда пользователи перемещаются между разными комнатами чата. Каждый раз, когда пользователь переключает комнату, создается новое соединение WebSocket, но старые не очищаются должным образом.
Текущий код:

Код: Выделить всё

function ChatRoom({ roomId }) {
const [messages, setMessages] = useState([]);

useEffect(() => {
const ws = new WebSocket(`wss://example.com/chat/${roomId}`);

ws.onmessage = (event) => {
setMessages(prev => [...prev, JSON.parse(event.data)]);
};

ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
}, [roomId]);

return {/* render messages */};
}

Что я пробовал:

• Попытка 1. Добавление функции очистки для закрытия WebSocket:

  Код: Выделить всё

  useEffect(() => {
  const ws = new WebSocket(`wss://example.com/chat/${roomId}`);
  
  ws.onmessage = (event) => {
  setMessages(prev => [...prev, JSON.parse(event.data)]);
  };
  
  return () => {
  ws.close(); // Error: Cannot read property 'close' of undefined
  };
  }, [roomId]);
  

  Это выдает:
  
  TypeError: невозможно прочитать свойство close из неопределенного значения при размонтировании компонента.
• Попытка 2: проверка ReadyState перед закрытием:

  Код: Выделить всё

  useEffect(() => {
  const ws = new WebSocket(`wss://example.com/chat/${roomId}`);
  
  ws.onmessage = (event) => {
  setMessages(prev => [...prev, JSON.parse(event.data)]);
  };
  
  return () => {
  if (ws.readyState === WebSocket.OPEN) {
  ws.close();
  }
  };
  }, [roomId]);
  

  Это работает без ошибок, но Chrome DevTools по-прежнему показывает накопление нескольких подключений WebSocket, а использование памяти продолжает увеличиваться.

Ожидаемое поведение:
При переключении между комнатами старое соединение WebSocket должно закрываться перед открытием нового.
Фактическое Поведение:
Использование памяти увеличивается при каждом переключении комнаты. При открытии вкладки DevTools Network отображается более 5 подключений WebSocket после многократного переключения комнат.
Среда:

• React 18.2.0
• Chrome 120
• Бэкенд Node.js с библиотекой ws

Как правильно выполнить очистку webSocket в React, чтобы предотвратить утечку памяти?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ions-in-re