React Hooks Sending message at first in Websockets

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

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;