Tengo un evento de conexión donde, una vez que inicio sesión, siempre llego a la pantalla de inicio y en el efecto de uso de la pantalla de inicio, tengo el evento de "conexión" del lado del cliente socket.io de la siguiente manera. El authToken de localStorage se configuró en la pantalla de inicio de sesión después de que coincidiera la contraseña. Veo que el evento de conexión se activa varias veces, incluso cuando desactivé el modo estricto de reacción.
El problema parece estar en el lado del cliente, ya que console.log en el segundo useEffect se activa varias veces. ¿Cómo debo configurar socket.io para que solo se active una vez después del renderizado de HomeScreen?
useEffect(() => { if(localStorage.getItem('authToken') && !localStorage.getItem('showedLoginStatus')){ toast.success("Login successful!"); localStorage.setItem('showedLoginStatus', 'showed'); } setSocket(io.connect(backendLink)); }, []) useEffect(() => { console.log(socket, localStorage.getItem('authToken')); socket?.emit("newUser", localStorage.getItem('authToken')); }, [socket, localStorage.getItem('authToken')])El código backend socket.io es el siguiente:
socket.on("newUser", async (jwtToken) => { const user = await findUserFromJWT(jwtToken); addNewUser(user._id, socket.id); console.log('connect print'); printUsers(); })Console.log en el lado del servidor después de solo 1 inicio de sesión:
connect print { userID: new ObjectId("6243ff45c46997fa04ea6e29"), socketID: '_-9y81H4P7PaUt19AAAB' } { userID: new ObjectId("6243ff45c46997fa04ea6e29"), socketID: 'cjU_JmCqUOMF619PAAAH' }No estoy totalmente seguro, pero al ver esta respuesta parece que poner en uso las dependencias de localStorageEffect no es la mejor idea.
Sin embargo, para resolver la llamada doble, en mi experiencia, es mejor usar un estado para rastrear si se realizó la llamada de nuevo usuario:
const [newUserRegistered, setNewUserRegistered] = useState(false); useEffect(() => { const setNewUser = () => { if(window.localStorage('newUser') && socket && !newUserRegistered){ //do your socket thing, then setNewUserRegistered(true); } } window.addEventListener('storage', setNewUser); return() => { window.removeEventListener('storage', setNewUser) } }, [socket, newUserRegistered])