80

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!

3 Answers 3

97

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>
    );
}
5
  • 4
    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?
    – rykener
    Commented Sep 27, 2020 at 23:49
  • 4
    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
    – George
    Commented Jul 16, 2021 at 11:53
  • @Alvaro - hoping if you could please look at thread stackoverflow.com/questions/69476080/…
    – ArthurJ
    Commented Oct 7, 2021 at 5:55
  • @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?
    – Greg Woods
    Commented Nov 17, 2021 at 8:10
  • 9
    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
    – Greg Woods
    Commented Nov 17, 2021 at 20:29
0
 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' },
    }),
  );
  

});
1
  • 1
    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.
    – Community Bot
    Commented Jun 6, 2022 at 14:47
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.