React: How to implement WebSocket real-time updates?

1import { useState, useEffect, useRef, useCallback } from "react";
2
3function useWebSocket(url: string) {
4  const [isConnected, setIsConnected] = useState(false);
5  const [lastMessage, setLastMessage] = useState(null);
6  const wsRef = useRef<WebSocket | null>(null);
7
8  const connect = useCallback(() => {
9    const ws = new WebSocket(url);
10    wsRef.current = ws;
11
12    ws.onopen = () => setIsConnected(true);
13    ws.onclose = () => {
14      setIsConnected(false);
15      // Auto reconnect
16      setTimeout(connect, 3000);
17    };
18    ws.onmessage = (event) => {
19      setLastMessage(JSON.parse(event.data));
20    };
21  }, [url]);
22
23  useEffect(() => {
24    connect();
25    return () => wsRef.current?.close();
26  }, [connect]);
27
28  const sendMessage = useCallback((message: any) => {
29    if (wsRef.current?.readyState === WebSocket.OPEN) {
30      wsRef.current.send(JSON.stringify(message));
31    }
32  }, []);
33
34  return { isConnected, lastMessage, sendMessage };
35}

1function Chat() {
2  const { isConnected, lastMessage, sendMessage } = useWebSocket("ws://localhost:3000");
3  const [messages, setMessages] = useState([]);
4  const [input, setInput] = useState("");
5
6  useEffect(() => {
7    if (lastMessage) {
8      setMessages(prev => [...prev, lastMessage]);
9    }
10  }, [lastMessage]);
11
12  const handleSend = () => {
13    sendMessage({ type: "message", text: input });
14    setInput("");
15  };
16
17  return (
18    <div>
19      <div className="status">{isConnected ? "Connected" : "Disconnected"}</div>
20      <div className="messages">
21        {messages.map((msg, i) => (
22          <div key={i}>{msg.text}</div>
23        ))}
24      </div>
25      <input value={input} onChange={e => setInput(e.target.value)} />
26      <button onClick={handleSend}>Send</button>
27    </div>
28  );
29}