problems with repetitive callbacks

client/src/App.jsx

@@ -6,11 +6,11 @@ import PlayerCard from './components/PlayerCard';
 import "./styles.css";
 
 function App() {
-  const [socket, setSocket] = useState();
   const [state, setState] = useState({
     socket: null,
-    players: null,
     id: null,
+    players: [],
+    name: '',
   })
 
   useEffect(() => {
@@ -22,20 +22,22 @@ function App() {
 
   useEffect(() => {
     if (state.socket) {
-      state.socket.on('connect', (data) => {
-        console.log("connection to Express successful!");
-        console.log(data);
-
-        setState({
-          ...state,
-          id: state.socket.id,
-          players: data
-        });
-
-        // state.socket.emit('connect', null);
-      })
+      state.socket.on('fire', (data) => {
+        console.log(`fire: ${data}`);
+        if (!state.players.length || !state.players.includes(data)) setState(() => {
+          let newPlayers = state.players;
+          newPlayers.push(data);
+          return {
+            ...state, players: newPlayers
+          }
+        });
+      });
+    }
+  }, [state]);
+
+  const handleJoin = () => {
+    state.socket.emit('join', state.name);
   }
-  }, [state.socket]);
 
   return (
     <div className="App">
@@ -43,8 +45,13 @@ function App() {
       {<h2>Your socket ID is: {state.id || ''}</h2>}
       {<h3>Active players: {state.players || ''}</h3>}
 
+      <input type="text" onChange={(e) => setState({...state, name: e.target.value})} />
+      <button onClick={handleJoin}>Join</button>
+
       <div className="players">
-        <PlayerCard name="Me" votes={null} />
+        <div id="messages"></div>
+        <h3>Players:</h3>
+        {state.players ? state.players.map(player => <PlayerCard name={player} votes={null}/>) : null}
       </div>
     </div>
   )

index.js

@@ -13,27 +13,23 @@ const io = socketIO(server, {
     }
 });
 
-let players = [];
+// for more persistent state, this could be incorporated into a database table
+io.on('connection', (socket) => {
+    console.log(`new client connected: ${socket.id}`);
+
+    socket.on('join', (data) => {
+        console.log(`${data} JOINS`)
+        io.emit('fire', data);
+    });
+    
+
+    socket.on('disconnect', () => {
+        console.log(`player ${socket.id} disconnected`);
+    })
+});
 
 server.listen(8000, (err) => {
     if (err) console.log(err);
     console.log("Listening on 8000");
     
-    io.on('connection', (socket) => {
-        if (players.length === 0) players.push(socket.id);
-
-        console.log('new client connected.');
-        console.log(`players: ${players}`);
-        console.log('');
-
-        socket.emit('connection', players);
-
-        socket.on('disconnect', () => {
-            let found = players.indexOf(socket.id);
-            players = players.splice(found, 0, '');
-            console.log(`player ${socket.id} disconnected`);
-            console.log(`players: ${players}`);
-            console.log('');
-        })
-    });
 })