title: Socket.on is not firing
body: <p>I am building a message board as a learning exercise and have working notifications and a chat app working with socket.io.</p>
  <p>I am trying to integrate a basic video call functionality, but I am stumped on some basic preparations for that feature. My socket.on code isn't firing when the server emits the relevant function and I have no clue why. The console logs around the emits are all executing, so I know the code is being reached.</p>
  <p>On the client my socket.on code is in the same component as my notifications and they are working and it is definitely mounted.</p>
  <p>It's the userOff and receiveCall functions that aren't being executed (for whatever reason)...</p>
  <p>Any help will be appreciated.</p>
  <p>Server:</p>
  <pre><code>io.on('connection', (socket) =&gt; {
    socket.emit('messageFromServer');
    socket.on('messageToServer', (dataFromClient) =&gt; {
      connectedUsers[dataFromClient.username] = socket;
    });
    socket.on('join', ({ username, room }) =&gt; {
      socket.join(room);
      socket.emit('message', 'Welcome!');
      socket.broadcast
        .to(room)
        .emit('message', `${username} has joined the room!`);
    });
    socket.on('messageRoom', ({ username, room, message }) =&gt; {
      socket.broadcast.to(room).emit('message', `${username}: ${message}`);
    });
    socket.on('call', ({ username, id }) =&gt; {
      if (connectedUsers[username]) {
        connectedUsers[username].emit('recieveCall', id);
        console.log('online emitted');
      } else {
        socket.emit('userOff');
        console.log('offline emitted');
      }
    });
    socket.on('disconnect', () =&gt; {
      socket.disconnect(true);
    });
  });
  </code></pre>
  <p>client:</p>
  <pre><code>import React, { useContext, useEffect } from 'react';
  import socketIOClient from 'socket.io-client';
  import StateContext from '../StateContext';
  import DispatchContext from '../DispatchContext';
  const endpoint = 'http://localhost:5000';
  
  const Socket = () =&gt; {
    const appState = useContext(StateContext);
    const appDispatch = useContext(DispatchContext);
    const socket = socketIOClient(endpoint);
  
    useEffect(() =&gt; {
      socket.on('messageFromServer', () =&gt; {
        socket.emit('messageToServer', { username: appState.username });
      });
      socket.on('userOff', () =&gt; {
        console.log('user offline');
      });
      socket.on('recieveCall', (id) =&gt; {
        console.log('recieve call');
      });
      socket.on('mailNotification', () =&gt; {
        document.getElementById('notifyMail').classList.add('notify');
      });
      socket.on('boardsNotification', () =&gt; {
        document.getElementById('notifyBoards').classList.add('notify');
      });
    }, []);
  
    return null;
  };
  
  export default Socket;
  </code></pre>