I have a connect event where, once i login, I always get to the homescreen and on the homescreen's useEffect, I have socket.io client side "connect" event as follows. The localStorage authToken was set on the Login Screen after the password matched. I see the connect event fires multiple times even when I turned off React Strict Mode.
The problem seems to be on the client side as the console.log on the second useEffect fires multiple times. How should I set up socket.io so it only fires one time after HomeScreen render?
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')])
The backend socket.io code is as follows:
socket.on("newUser", async (jwtToken) => {
const user = await findUserFromJWT(jwtToken);
addNewUser(user._id, socket.id);
console.log('connect print'); printUsers();
})
Console.log on the server side after only 1 Login:
connect print
{
userID: new ObjectId("6243ff45c46997fa04ea6e29"),
socketID: '_-9y81H4P7PaUt19AAAB'
}
{
userID: new ObjectId("6243ff45c46997fa04ea6e29"),
socketID: 'cjU_JmCqUOMF619PAAAH'
}
Not totally sure but, looking at this answer it seems like putting localStorage in useEffect dependencies is not the best idea.
To solve the double call though, in my experience, it is better to use a state to track whether the newUser call was done:
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])