How to perform a beforeUnload event on React?

import "./styles/global.css";
import Home from "./sections/Home";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const onBeforeUnload = (ev) => {
      
      //#############     
      console.log("SOME CODE HERE");
      //#############

      ev.returnValue = "Anything you wanna put here!";
      return "Anything here as well, doesn't matter!";
    };

    window.addEventListener("beforeunload", onBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", onBeforeUnload);
    };
  }, []);

  return (
    <div className="App">
        <Header />
        <Home />
        <Footer />
    </div>
  );
}

export default App;

make the useEffect fires on any update (by removing the empty dependancy), then put inside any code you want it to be exexuted before closing the tab or refresh.

  useEffect(() => {
    window.addEventListener("beforeunload", () => {
    // any code you want
    });
  });

I have already make it work thanks !!... Clearly i wasn´t getting the pop up when reloading page (wich is a misterious thing), but the code before the return executes perfectly.