Proper way of using React hooks + WebSockets

Question

I need to connect to WebSockets server and log it's messages. With React class component I'd put this logic in componentDidMount lifecycle hook and move on happily, but I'm not sure how to properly implement it with hooks.

Here's my first attempt.

import React, {useEffect} from 'react';

export default function AppWs() {
  useEffect(() => {
    let ws = new WebSocket('wss://ws.kraken.com/');
    ws.onopen = () => console.log('ws opened');
    ws.onclose = () => console.log('ws closed');

    ws.onmessage = e => {
      const message = JSON.parse(e.data);
      console.log('e', message);
    };

    return () => {
      ws.close();
    }
  }, []);

  return (
    <div>hooks + ws</div>
  )
}

I added connection and log logic to useEffect, provided empty array with dependencies, and everything worked great. Until I needed to add pause state to pause logging.

export default function AppWs() {
  const [isPaused, setPause] = useState(false);

  useEffect(() => {
    let ws = new WebSocket('wss://ws.kraken.com/');
    ws.onopen = () => console.log('ws opened');
    ws.onclose = () => console.log('ws closed');

    ws.onmessage = e => {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log('e', message);
    };

    return () => {
      ws.close();
    }
  }, []);

  return (
    <div>
      <button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
    </div>
  )
}

ESLint started to yell at me that I should add isPaused state as a dependency to useEffect.
Well, ok, done.
But I noticed re-connection to WS server after every time I click the button. This is clearly not what I want.

My next iteration was to use two useEffects: one for connection and one for message processing.

export default function AppWs() {
  const [isPaused, setPause] = useState(false);
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const wsClient = new WebSocket('wss://ws.kraken.com/');
    wsClient.onopen = () => {
      console.log('ws opened');
      setWs(wsClient);
    };
    wsClient.onclose = () => console.log('ws closed');

    return () => {
      wsClient.close();
    }
  }, []);

  useEffect(() => {
    if (!ws) return;

    ws.onmessage = e => {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log('e', message);
    };
  }, [isPaused, ws]);

  return (
    <div>
      <button onClick={() => setPause(!isPaused)}>{isPaused ? 'Resume' : 'Pause'}</button>
    </div>
  )
}

This works as expected, but I have a feeling that I miss something and this task can be solved easier, with one useEffect. Please help to refactor the code on convince me that I'm using React hooks in a proper way. Thanks!

Answer 1

We all know that react are reactive in terms of state and re-rendering, we don't want to mess up the current connection while our application keep listening on some events, most of the answers I saw was to put it on the useEffect wherein they handle the ws connection using useRef, here is the caveat, everytime the component state change, it rerender the components at the same time your websocket connection also mess up

useEffect(()=> {
  ws.current = new Websocket('URL')
  ws.current.on('some-event', () => {
    // console.log(state) will not get update unless we add it as dependency
  })
}, [...])

there will be a time that connection will cast frequently and react might suddenly re-render at the same time, and there is a chance that the client connection will also cast as well depends on how many times your react re-render, and yes backend as well might get in trouble, as a React Developer, we hate unnecessary re-render just because of one state change.

NOTE: handle properly the re-renders and states of your React Application, if you wont get mess up in the future.

So, How do we address that?, remember that our application has an entry file index.js, we can put above your socket configuration and where the state management libs are, so here how I properly end this up

//socket.ts
const client = new SocketClient(WEBSOCKET_SERVER_URL, {
  namespace: 'chat',
  messageType: 'bytes'
});
client.connect(() => console.log('SUCCESS CONNECTION'));
client.error(() => console.log('ERROR CONNECTION'));

const socketConfig = (store: Store) => {
  // ... do something here
  socket.on('some-event', () => {...});
};
export {socket}
export default socketConfig


//index.ts
import {createRoot} from 'react-dom/client';

import store from 'ducks'; //lets assume this is our state manager
import socketConfig from 'api/socket'

import App from './App';

const rootElement = document.getElementById('root') as Element;
const root = createRoot(rootElement);

socketConfig(store);

root.render(<App store={store}  />);

//status.js
import {socket} from 'api/socket';
...
  useEffect(() => {
    const statusListener = () => {...}
    socket.on('status-event', statusListener)
    return () => {
        socket.remove('status-event', statusListener);
  }, [])
...

the SocketClient is a factory class that based on Websocket, you can create your own of course

Answer 2

 useEffect(() => {
const socket = new WebSocket('wss://ws.kraken.com');
socket.addEventListener('message', function (event) {
  const a = JSON.parse(event.data);
  setPriceWebSocket(a);

  const amin = socket.send(
    JSON.stringify({
      event: 'subscribe',
      pair: ['XBT/USD', 'XBT/EUR', 'ADA/USD'],
      subscription: { name: 'ticker' },
    }),
  );
  

});

Answer 3

As you are only setting the web socket once, I think a better approach is to use a ref instead of a state:

The order of useEffect is important.

As suggested by George in the comments, in the first useEffect ws.current is saved to a variable to make sure that when close is called it refers to the same instance.

export default function AppWs() {
    const [isPaused, setPause] = useState(false);
    const ws = useRef(null);

    useEffect(() => {
        ws.current = new WebSocket("wss://ws.kraken.com/");
        ws.current.onopen = () => console.log("ws opened");
        ws.current.onclose = () => console.log("ws closed");

        const wsCurrent = ws.current;

        return () => {
            wsCurrent.close();
        };
    }, []);

    useEffect(() => {
        if (!ws.current) return;

        ws.current.onmessage = e => {
            if (isPaused) return;
            const message = JSON.parse(e.data);
            console.log("e", message);
        };
    }, [isPaused]);

    return (
        <div>
            <button onClick={() => setPause(!isPaused)}>
                {isPaused ? "Resume" : "Pause"}
            </button>
        </div>
    );
}