How to use connect and disconnect socket in React 18 useEffect?

[AngelHadzhiev]

Hello,
I am using socket io in my React.js application to communicate to another node.js application. This was working all good and fine until I updated my react.js version to 18. Maybe you have already heard that this update leads to useEffect rendeing two times in StrictMode. This makes my socket not connect anymore.

I use Redux to make the connect and disconnect:

  useEffect(() => {
    dispatch(connect());
    return () => dispatch(disconnect());
  }, []);

I updated this to the following:

const shouldConnect = useRef(true);
  useEffect(() => {
    if (shouldConnect.current === true) {
      shouldConnect.current = false;
      dispatch(connect());
    }
    return () => {
      if (shouldConnect.current === true) {
        shouldConnect.current = false;
        dispatch(disconnect());
      }
    };
  }, []);

I rathere feel that this is not the best solution though. How would I be able to use Socket IO with the new React 18 useEffect?

[darrachequesne]

Hi! Please check this guide: https://socket.io/how-to/use-with-react

[AngelHadzhiev]

Thank you. This guide is quite helpful.