React Hooks Sending message at first in Websockets - reactjs

Question

I can't send message after subsequential clicks, if i click button at first time it is sending message to server, after that it is not sending messages to server.
import { useEffect, useState, useRef } from "react";
import Header from "../src/Components/Header";
import ChatHistory from "../src/Components/ChatHistory";
import ChatArea from "../src/Components/ChatArea";
function App() {
const [messages, setMessages] = useState([]);
const testValue = { messages, setMessages };
const socket = useRef(null);
const renderCount = useRef(0);
const sendMessage = (msg = "test") => {
if (socket.current) {
socket.current.send(msg);
}
addMessages(msg);
};
const addMessages = (msg) => {
setMessages((prev) => [...prev, msg]);
};
useEffect(() => {
socket.current = new WebSocket("ws://localhost:8001/ws");
socket.current.onmessage = (msg) => {
addMessages(msg);
};
}, []);
useEffect(() => {
return () => {
if (socket.current) {
socket.current.close();
}
};
}, [socket]);
console.log("i am rendering");
return (
<>
<Header />
<ChatHistory chatHistory={messages.current} />
<div>
<button onClick={sendMessage}>Send</button>
</div>
</>
);
}
export default App;
Above mentioned one is my code, While clicking send button at first time, it is triggering message to server, after another subsequential clicks it isn't triggering message to server. Help needed.

Answer 1

Your second useEffect actually closing the connection after the first render, it's unnecessary.
Moreover you don't really need to save your socket instance in a ref, usually you need a single instance:
const socket = new WebSocket("ws://localhost:8001/ws");
function App() {
const [messages, setMessages] = useState([]);
const addMessages = (msg) => {
setMessages((prev) => [...prev, msg]);
};
const sendMessage = (msg = "test") => {
socket.send(msg);
addMessages(msg);
};
// Setup
useEffect(() => {
socket.current.onmessage = addMessages;
}, []);
// Runs on App unmount, means on closing the application
useEffect(() => {
return () => {
socket.close();
};
}, []);
return (
<>
<Header />
<ChatHistory chatHistory={messages.current} />
<div>
<button onClick={sendMessage}>Send</button>
</div>
</>
);
}

Answer 2

useEffect(() => {
return () => {
if (socket.current) {
socket.current.close();
}
};
}, [socket]);
everytime the socket is changing, you close it
try to unmont in the same useEffect that is defining socket
useEffect(() => {
if (!socket.current) {
socket.current = new WebSocket("ws://localhost:8001/ws");
socket.current.onmessage = (msg) => {
addMessages(msg);
};
}
return () => {
if (socket.current) {
socket.current.close();
}
};
}, [socket]);
Note useRef is not optimal for that case, use useState instead

Answer 3

This is working, but i am not sure what i am did wrong.
import { useEffect, useRef, useState } from "react";
import Header from "./Components/Header";
import ChatHistory from "./Components/ChatHistory";
function App() {
const [chatHistory, setChatHistory] = useState([]);
const [isOnline, setIsOnline] = useState(false);
const [textValue, setTextValue] = useState("");
const webSocket = useRef(null);
webSocket.current = new WebSocket("ws://localhost:8001/ws");
useEffect(() => {
setTimeout(() => {
if (webSocket.current.readyState === WebSocket.OPEN) {
setIsOnline(true);
}
if (webSocket.current.readyState === WebSocket.CLOSED) {
setIsOnline(false);
setChatHistory([]);
}
}, 5);
}, [webSocket.current]);
const sendMessage = () => {
if (webSocket.current.readyState === WebSocket.OPEN) {
setChatHistory([...chatHistory, textValue]);
webSocket.current.send(textValue);
}
};
return (
<>
<div className="App">
<Header onLine={isOnline} />
<ChatHistory chatHistory={chatHistory} />
<input
type="text"
onChange={(e) => setTextValue(e.target.value)}
value={textValue}
placeholder="Type Message..."
/>
<button onClick={sendMessage}>Hit</button>
</div>
</>
);
}
export default App;