How to prevent memory leak when using useEffect with WebSocket connections in React?

I'm building a real-time chat application using React and WebSocket. I'm experiencing memory leaks when users navigate between different chat rooms. Each time a user switches rooms, a new WebSocket connection is created but the old ones aren't properly cleaned up.

Current Code:

javascript

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 <div>{/* render messages */}</div>; }

What I've Tried:

Adding a cleanup function in useEffect that calls ws.close(), but getting "Cannot read property 'close' of undefined" errors

Using ws.readyState to check connection status before closing, but connections still accumulate

Expected Behavior: When switching between rooms, the old WebSocket connection should close before opening a new one.

Actual Behavior: Memory usage increases with each room switch, and Chrome DevTools shows multiple open WebSocket connections.

Environment:

React 18.2.0

Chrome 120

Node.js backend with ws library

How can I properly clean up WebSocket connections in React to prevent these memory leaks?