UseEffect keep будет запускать диспетчеризацию каждый раз, когда я обновляю, хотя я использую массив в качестве второго аргумента

Question

Я создаю клон игры Quiplash и решил использовать React / Redux / Node.js / и веб-сокеты для своего проекта. В настоящее время я пытаюсь использовать useEffect в качестве компонента componentDidMount, передав ему второй пустой массив, чтобы диспетчер действий (addPlayer (player)) запускался только при первом посещении страницы пользователем.

также запускается после каждого обновления, даже если dispatch, roomID и props.location.search никогда не меняются.

Что-то не так с тем, как я написал этот функциональный компонент?

Вот мой MainLobby.jsстраница компонентов.

import React, {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux';
import queryString from 'query-string';
import Game from '../Game/Game';
import io from 'socket.io-client';
import { Button } from 'semantic-ui-react';
import {setRoom} from '../../actions/joinRoomActions'
import {addPlayer, removeAllPlayers, startGame, getPlayers} from '../../actions/gameActions'

let socket;



export const MainLobby = (props) => {
    const dispatch = useDispatch();
    const roomID = useSelector(state => state.userHome.room_id)
    const ENDPOINT = 'localhost:3000'
    const gameStarted = useSelector(state => state.game.gameStarted)

    useEffect(() => {
            const {name, room} = queryString.parse(props.location.search)
            socket = io(ENDPOINT);
            socket.emit('join',  {name, room}, () => {});
            return() => {
                socket.emit('disconnect');
                socket.off();
            }
    }, [props.location.search]);
    console.log(props.location.search)
    useEffect(() => {
        dispatch(setRoom(roomID))
    }, [dispatch, roomID])

    useEffect(() => {
        const player = queryString.parse(props.location.search)
        dispatch(addPlayer(player))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        const {room} = queryString.parse(props.location.search)
        dispatch(getPlayers(room))
    }, [dispatch, props.location.search])



    if(gameStarted === true) {
        return (<Game/>)
    } else {
    return (
        <div>
            <h1>Main Lobby</h1>
            <div className='main-lobby-screen'>
                <button onClick={()=> dispatch(removeAllPlayers())}>Clear Lobby</button>
                <p> Users currently in the lobby Max 8</p>

                <Button onClick={() => dispatch(startGame())}>Start Game</Button>
            </div>
        </div>
    )}
}

export default MainLobby

Основной пользователь перенаправляется в MainLobby со страницы входа. Я использую Redirect от'ero-router-dom '. Мое главное приложение выглядит примерно так ...

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { LandingPage } from './components/Landing/LandingPage.js';
import  {UserHomepage } from './components/UserHomepage/UserHomepage.js';
import JoinRoom from './components/joinRoom/JoinRoom.js';
import MainLobby from './components/MainLobby/MainLobby.js';

function App() {
  return (
    <div>
       <BrowserRouter>
      <Route exact path="/" component={LandingPage}/>
      <Route exact path='/homepage' component={UserHomepage} />
      <Route exact path='/join-room' component={JoinRoom} />
      <Route exact path='/main-lobby' component={MainLobby}/>
      </BrowserRouter>
    </div>
  );
}

export default App;


"name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "jquery": "^3.4.1",
    "query-string": "^6.8.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-memo": "^0.3.1",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "socket.io-client": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "0.0.0-38dd17ab9"
  }
}

Выше я включил свой package.json на случай, если ошибка вызвана зависимостью. Надеюсь, другие люди столкнулись с этой ошибкой, потому что я везде искал ответ, но пока не нашел его!