Why sending json message in webSocket caused a lot re-render in react app

293 Views Asked by At

I have a form that want to send message via webSocket when click on submit button but after click and send message my component repeats in a cycle and my console shows a lot of console.log; I tried everything and only send message caused that; what can I do?

const [ISINData, setISINData] = useState<ISINDataType[]>([]);

  const { sendJsonMessage, lastJsonMessage, readyState, getWebSocket } =
    useWebSocket("ws://localhost:8425/", {
      shouldReconnect: (closeEvent) => true,
      reconnectInterval: 100,
    });


const onSubmitClick = useCallback(() => {
    sendJsonMessage({ subscribe: "DE000BASF111" });
  }, [])

 return (
    <div className="App h-full container">
      <span>The WebSocket is currently {connectionStatus}</span>
      <div className="flex w-full h-full flex-col justify-center">
        <div className="flex items-center p-4 box-border-sizing justify-center">
          <ISINForm onSubmit={onSubmitClick} className="flex items-center" />
        </div>
        <Card
          classNames={classNameCreator([
            "flex-grow-1 pr-4 pl-4 box-border-sizing",
            styles.content,
          ])}
        >
          <ul className={classNameCreator([styles["watch-list"], "p-0 m-0"])}>
            {ISINData?.map((ISIN) => (
              <ISINCard
                ISINData={ISIN}
                key={ISIN?.isin}
                onClick={() => onRowClick(ISIN?.isin)}
              />
            ))}
          </ul>
        </Card>
      </div>
    </div>
  );

0

There are 0 best solutions below