title: SocketIO & ReactJs: Socket Emitting multiple times
body: <p>My client is responding multiple times when my server emits an event.
  By reading other available SOF answers, it seems like I must have duplicated the event listeners somewhere in my code.</p>
  
  <p>I actually have other socket listeners in the same file, and they all (?) seem to be functioning fine.
  I've tried moving the listener out of the <code>useEffect</code> to see if it works, but it has the same issue.</p>
  
  <p>I've tried to limit the listener to socket.once, however, there is an additional issue -
  <code>user</code> is not defined on the first emit.
  Only the second emit then <code>user</code> is defined...</p>
  
  <p>Client:</p>
  
  <pre><code>const getUserInfo= async () =&gt; {
    try {
      const { data } = await axios.get('http://localhost:8080/user/info', axiosConfig);
      return data;
    } catch (error) {
      return { error };
    }
  }
  
  const App = ({ socket, clientId }) =&gt; {
  
    const [state, setState] = useState({
      user: undefined,
    });
  
  
    const checkAuthentication = async () =&gt; {
      const user= await getUserInfo();
  
      localStorage.setItem('user.email', user.email);
      setState({ ...state, user});
      return true;
    }
  
    useEffect(() =&gt; {
      const onMount = async () =&gt; {
        const authed = await checkAuthentication()
      };
  
      onMount();
    }, []);
  
    userEffect(() =&gt; {
    socket.on("allInfo", async ({ requester }) =&gt; { //This catches multiple times
      console.log(`Admin ${requester} requested for tablet information.`)
      const user= { ...state.user};
  
      socket.emit('infoPayload', { user);  //thus this emits multiple times.
    })
  }, [state.user])
  
  
    return (
      &lt;&gt;
        &lt;Route exact path="/"
          render={() =&gt; &lt;div&gt;{state.user&amp;&amp; state.user.email}&lt;/div&gt;}
        /&gt;
      &lt;/&gt;
    );
  }
  
  export default (App);
  
  </code></pre>