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!

Litchfield

Answer 1

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>
    );
}

Asylum

when I use this code I notice that the websocket closes and then reopens after each received message. Any ideas why it's doing that? – Rip

By the way, you should store the newly created websocket to a separate variable and us it for the cleanup. Not the ws.current. Some other code can mutate the ws.current and the old websocket instance will not be closed by cleanup. The connection will remain open and cause bugs – Understanding

@Asylum - hoping if you could please look at thread #69476580 – Dorison

@Alvaro, I used your exact code to solve my websockets issues too. Thanks :) But why useRef? I read the docs and it is supposed to be used to reference a DOM element. But here this is not the case. Could someone explain how it is being used here? – Cordellcorder

I found a good answer to my own question here: dmitripavlutin.com/react-useref-guide Refs aren't just for DOM elements apparently. The key points are, they persist between component refreshes, and don't trigger a component refresh when the value is changed. Ideal for this scenario – Cordellcorder

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' },
    }),
  );
  

});

Homogenesis

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Mccourt

Answer 3

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

Entranceway