Estoy tratando de agregar una lista de usuarios en línea a mi aplicación de chat, pero me encontré con este problema:

En la parte frontal, emito el nombre del usuario que ha iniciado sesión actualmente y luego actualizo el estado de mi matriz de usuarios:

 useEffect(() => { if (Auth.loggedIn()) { const { data } = Auth.getUserInfo(); socket.emit("user_connected", data.username); } // if I remove these brackets I get an infinite loop in my server }, []); useEffect(() => { socket.on("online_users", (onlineUsers) => { setUsers(onlineUsers); console.log(users); }); });

Creé la matriz de usuarios en el back-end usando el nombre de usuario emitido:

 const onlineUsers = []; io.on("connection", (socket) => { socket.join("public_chat"); console.log(`A user has joined the chat`); socket.on("user_connected", (user) => { const userExists = checkUserArray(user, onlineUsers); if (!userExists) { onlineUsers.push({ user, id: socket.id }); } console.log(onlineUsers); socket.in("public_chat").emit("online_users", onlineUsers); console.log(`${user} is now online.`); }); });

Abrí dos navegadores separados con dos usuarios registrados diferentes para probar, y cuando actualizo la página en un navegador, el otro obtiene la lista de usuarios en línea actualizada en tiempo real, pero el navegador en el que actualicé inicialmente tiene una matriz vacía para el estado de usuario. ¿Necesito hacer una tienda de estado global usando redux o algo así?