title: Problem with creating online user list with socket.io and React
body: <p>I am trying to add a list of online users to my chat app, but I ran into this problem:</p>
  <p>On the front end I emit the currently logged in user's name, and then update the state of my users  array:</p>
  <pre><code>useEffect(() =&gt; {
      if (Auth.loggedIn()) {
        const { data } = Auth.getUserInfo();
        socket.emit(&quot;user_connected&quot;, data.username);
      }
  // if I remove these brackets I get an infinite loop in my server
    }, []);
  
   useEffect(() =&gt; {
      socket.on(&quot;online_users&quot;, (onlineUsers) =&gt; {
        setUsers(onlineUsers);
        console.log(users);
      });
    });
  </code></pre>
  <p>I created the user array in the back end using the emitted username:</p>
  <pre><code>const onlineUsers = [];
  io.on(&quot;connection&quot;, (socket) =&gt; {
    socket.join(&quot;public_chat&quot;);
    console.log(`A user has joined the chat`);
  
    socket.on(&quot;user_connected&quot;, (user) =&gt; {
      const userExists = checkUserArray(user, onlineUsers);
      if (!userExists) {
        onlineUsers.push({ user, id: socket.id });
      }
      console.log(onlineUsers);
      socket.in(&quot;public_chat&quot;).emit(&quot;online_users&quot;, onlineUsers);
  
      console.log(`${user} is now online.`);
    });
  });
  </code></pre>
  <p>I opened two separate browsers with two different logged in users to test, and when I refresh the page on one browser, the other gets the updated online user list in real-time, but the browser I initially refreshed on has an empty array for the user state. Do I need to make a global state store using redux or something?</p>