React hook cleanup when refreshing the page

Question

I have an app built in React using hooks that when closed needs to notify the server. I tried doing it using the following approach:

function onUnload() {

        if (roomID !== "")
            endGame(roomID, dispatch);
    }

    useEffect(() => {
        return onUnload;
    },[])

Here, endGame is a function that performs a HTTP request to the backend. But when refreshing the page to emulate a user closing the app, the request never reaches the server, meaning that the cleanup function doesn't get executed. Any ideas on what is wrong?

Thanks in advance

Answer 1

Refreshing the page is not same as component unmount. When you refresh the page, the React state is reset as React solely works on the current client session and refresh is equivalent to resetting it. What you are lloking for might be the onunload event. Try this:

window.onbeforeunload = function(e) {
  return onUnload();
};