Estoy tratando de usar el evento beforeUnload en reaccionar para realizar una acción antes de que se cierre la pestaña o el usuario actualice la página, el evento nunca se activa... Estoy usando el efecto en el componente de la aplicación.
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) => { 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;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;haga que useEffect active en cualquier actualización (eliminando la dependencia vacía), luego coloque cualquier código que desee que se ejecute antes de cerrar la pestaña o actualizar.
useEffect(() => { window.addEventListener("beforeunload", () => { // any code you want }); });¡Ya lo hice funcionar, gracias!... Claramente, no estaba recibiendo la ventana emergente al recargar la página (lo cual es algo misterioso), pero el código antes del retorno se ejecuta perfectamente.