This frontend goes from enter username -> create/join lobby. When following this path, it works fine and the socket is connected. If the user previously entered a username, the initial username page is not loaded and skips to the create/join lobby.

From here, it should connect, as it checks if the use state value of userID is not null, and connect.

App.js

import { useEffect, useState } from 'react';
import UsernameComponent from './components/usernameComponent';
import socket from './socket';


function App() {
  const [sessionId, setSessionId] = useState(sessionStorage.getItem("sessionId"));
  const [userID, setUserID] = useState(sessionStorage.getItem("userID"));
  const [room, setRoom] = useState('');
  const [inputValue, setInputValue] = useState("");
  console.log(userID);
  useEffect(() => {
    if (sessionId.length > 0) {
      socket.auth = { sessionId };
      console.log(socket);
    }
  }, [sessionId]);

  socket.on('connect', function () {
    console.log(socket.connected);
    socket.emit('refresh');
  });

  socket.on('connect', () => {
    console.log("Socket connected woo");
  });

  const onChangeHandler = event => {
    setInputValue(event.target.value);
  };

  const createLobby = () => {
    console.log(socket);
    socket.emit("Create-Room", inputValue, reply => {
      console.log(reply);

    });
  }
  
  return (
    <>
      {userID == null && sessionId == null && <UsernameComponent sessionId={sessionId} setSessionId={setSessionId} userID={userID} setUserID={setUserID} />}
      <div className='flex flex-col justify-center h-screen  w-6/12 mr-auto'>
        <div className='flex flex-row justify-evenly items-center'>
          <input type="text" className='border' onChange={onChangeHandler}></input>
          <button onClick={() => createLobby}>Create Lobby</button>
        </div>
        <div className='flex flex-row justify-evenly items-center'>
          <input type="text" className='border' onChange={onChangeHandler}></input>
          <button>Join Lobby</button>
        </div>
      </div>
    </>
  );
}

export default App;

usernameComponenet.js

import './../App.css';
import { useEffect, useState } from 'react';

const UsernameComponent = ({ socket, sessionId, setSessionId, userID, setUserID, setUsername, username}) => {


    const onUsernameSubmission = (username) => {
        socket.auth = { username };
        socket.connect();
        console.log(socket);
    }

    useEffect(() => {


        socket.on('session', (sessionInformation)=> {
            console.log(sessionInformation);
            sessionStorage.setItem("sessionId", sessionInformation.sessionID);
            sessionStorage.setItem("userID", sessionInformation.userID);
            setSessionId(parseInt(sessionInformation.sessionID)); // Parse to integer
            setUserID(parseInt(sessionInformation.userID)); // Parse to integer
        });
        console.log(' this runs as it should');

        socket.on('connection', () => {
            console.log('Connected to the server');
        });

    }, []);

    return (
        <div className="h-screen min-h-screen flex justify-center">
            <div className="flex flex-col justify-center items-center content-around">
                <input className="border" type="text" value={username} onChange={e => setUsername(e.target.value)}/>
                <button className="border" onClick={() => onUsernameSubmission(username)}>Click me!</button>
            </div>              
        </div>  
    );
}

export default UsernameComponent;

Socket Creation

import { io } from "socket.io-client";

const URL = "http://localhost:3000";
const socket = io(URL, { autoConnect: false });

export default socket;

I’ve moved socket.connect() outside use effect, ran it several times. Connection is always false. Tried passing from app to usernameComponenet via props, but didn’t work. The function that connect is in does run, but does not connect or give a console error/any backend response.