ws.jsx

const ws = useRef();
const [connected, setConnected] = useState(false);

useEffect(() => {
  // Create WebSocket connection.
  const socket = new WebSocket(`ws://localhost:4444/bob`);

  // Connection opened
  socket.addEventListener("open", (event) => setConnected(true));
  socket.addEventListener("close", (event) => setConnected(false));

  // Listen for messages
  socket.addEventListener("message", event => setMessages(messages => [...messages, JSON.parse(event.data.toString())]));

  // store the WebSocket instance to send messages at a later time.
  ws.current = socket;  
}, []);