React, socket.io page refresh continues without confirmation prompt selection

I am a beginner and I am trying to have a confirmation dialog box appear when a user refreshes a page so they can decide whether or not they want to leave the page. When a user clicks on the browser refresh, the confirmation box appears but the user disconnects automatically from socket server before making a selection.

import React, { useState, useEffect, useCallback, useMemo } from "react";
// ... (other imports and code)
function Game() {
// ... (previous code)
const location = useLocation();
const [shouldPrompt, setShouldPrompt] = useState(true);
const [initialRender, setInitialRender] = useState(true);
useEffect(() => {
const unloadCallback = (event) => {
event.preventDefault();
event.returnValue = "";
return "";
};
window.addEventListener("beforeunload", unloadCallback);
return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);
const handlePopstate = useCallback(
(event) => {
event.preventDefault();
event.stopPropagation();
if (shouldPrompt) {
const shouldLeave = window.confirm(
"Are you sure you want to leave the page?"
);
if (shouldLeave) {
if (isHost && hasOpponent) {
socket.emit("new_host", room);
} else {
socket.emit("leave_room", room);
}
navigate("/");
} else {
window.history.pushState(null, null, window.location.pathname);
}
}
},
[hasOpponent, isHost, navigate, room, shouldPrompt, socket]
);
useEffect(() => {
window.addEventListener("popstate", handlePopstate);
return () => {
window.removeEventListener("popstate", handlePopstate);
};
}, [handlePopstate]);
useEffect(() => {
if (!initialRender) {
setShouldPrompt(true);
} else {
setInitialRender(false);
}
}, [initialRender, location.pathname]);
useEffect(() => {
if (shouldPrompt) {
const unblock = navigate((tx) => {
if (tx.action === "POP" && location.pathname === "/game") {
return false;
}
});
return unblock;
}
}, [navigate, shouldPrompt, location.pathname]);
useEffect(() => {
if (!socket.connected) {
navigate("/");
}
}, [socket, navigate]);
// Rest of the component...
}
export default Game;

I've tried multiple variations of handling "beforeunload" and they all have the same result of the refresh action automatically happening despite no selection made on the confirmation prompt that appears.

The problem is likely the async of the beforeunload event is triggered, it has some limitations and doesnt guarantee that the page wont refresh before the code executes.

with the way you are trying to do it, the beforeunload even doesn't wait for the async operations in the socket disconnection to complete.

You can fix this by preventing the default behavior on the beforeunload, show the confirmation dialog, and then handle the socket disconnection and navigation manually.

Updated Code:

import React, { useState, useEffect, useCallback, useMemo } from "react";
function Game() {
// ... (previous code)
const [shouldPrompt, setShouldPrompt] = useState(true);
const handleBeforeUnload = useCallback((event) => {
if (shouldPrompt) {
event.preventDefault();
event.returnValue = "Are you sure you want to leave the page?";
}
}, [shouldPrompt]);
const handleSocketDisconnect = useCallback(() => {
if (shouldPrompt) {
if (isHost && hasOpponent) {
socket.emit("new_host", room);
} else {
socket.emit("leave_room", room);
}
setShouldPrompt(false); // To avoid showing the confirmation dialog again after socket disconnection.
navigate("/");
}
}, [hasOpponent, isHost, navigate, room, shouldPrompt, socket]);
useEffect(() => {
window.addEventListener("beforeunload", handleBeforeUnload);
socket.on("disconnect", handleSocketDisconnect);
return () => {
window.removeEventListener("beforeunload", handleBeforeUnload);
socket.off("disconnect", handleSocketDisconnect);
};
}, [handleBeforeUnload, handleSocketDisconnect, socket]);
// Rest of the component...
}
export default Game;

when the user refreshes the page, the confirmation dialog should appear, and if they choose to leave, the socket disconnection and page navigation will be handled accordingly. The shouldPrompt state is used to track whether the user should be prompted or not to avoid showing the confirmation dialog again after the socket disconnection and page navigation.