How to connect and disconnect socket depending on specific routes in react - node.js

Question

I am trying to implement an online multiplayer game using socketio. So far, I have created a couple of routes including a home, login, and game page with their respective components. Here is my server side code for the socket.
const express = require('express');
const connectDB = require('./config/db');
const http = require('http');
const socketio = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketio(server);
//socket logic
io.on('connect', socket => {
console.log('User Connected');
console.log(socket.id);
socket.on('disconnect', () => {
console.log('User Disconnected');
});
});
When a socket connects, it should log "User Connected" and the id, and when it disconnects it should log "User Disconnected". On the frontend, I included the socket logic within the board component which renders on the route of "/board?room=id" for some room id. When this component is mounted, the socket connects. However, after I leave the page, the socket doesn't disconnect. Furthermore, when I go back to the board page, the console outputs "User Connected" again with a different id. Does this mean that there are multiple socket connections, and is there a way to disconnect the socket once I leave the page? Here is the client side socket code:
import React, { Fragment, useState, useEffect } from 'react';
import io from 'socket.io-client';
import { connect } from 'react-redux';
import { leaveRoom } from '../../../actions/game';
import { Redirect } from 'react-router-dom';
import queryString from 'query-string';
let socket;
const Board = ({ game, auth, leaveRoom, location }) => {
const ENDPOINT = 'http://localhost:5000';
//room info
const [room, setRoom] = useState('');
//determines redirect
const [exit, setExit] = useState(false);
useEffect(() => {
const { room } = queryString.parse(location.search);
socket = io(ENDPOINT);
setRoom(room);
//When to redirect
if (
((!game.inGame || room !== game.room._id) && !game.loading) ||
!game.room
) {
leaveRoom();
setExit(true);
}
}, [ENDPOINT, location.search]);
if (exit) {
return <Redirect to='/menu' />;
}

Answer 1

Does this mean that there are multiple socket connections,
Yes, if you call io() with same namespace multiple times, it will creates multiple connections. check https://socket.io/docs/client-api/
To disconnect when unmount, you need to return a cleanup function in useEffect.
useEffect(()=>{
let socket = io(ENDPOINT);
return ()=>{
socket.disconnect();
}
});
check https://reactjs.org/docs/hooks-effect.html#recap