Estoy trabajando en el siguiente código:
const [userNick, setUserNick] = useState(""); const [eventListenerActive, setEventListenerActive] = useState(false); const promptOnLeaving = (ev) => { ev.returnValue = true; } useEffect(() => { if(userNick !== "" && !eventListenerActive){ console.log("ADDING EVENT LISTENER") window.addEventListener('beforeunload', promptOnLeaving) setEventListenerActive(true); } else if(userNick === "" && eventListenerActive){ console.log("REMOVING EVENT LISTENER") window.removeEventListener('beforeunload', promptOnLeaving) setEventListenerActive(false) } }, [userNick])Quiero agregar un detector de eventos a mi ventana, que escuche el evento anterior a la descarga, por ejemplo, el lado se cerrará, redirigirá o recargará.
Dado que hay varios campos de entrada en la interfaz de usuario, quiero preguntarle al usuario si está seguro de que quiere cerrar la página, aunque hay algunos campos de formulario abiertos. Uno de ellos es el apodo del usuario (aquí userNick).
Cuando el nick del usuario está vacío, quiero eliminar el detector de eventos, ya que no hay datos que se perderían en una recarga, por lo tanto, no necesito avisar al usuario.
Por otro lado, si el usuario ha ingresado texto dentro del campo de entrada UserNick, quiero agregar el detector de eventos y preguntarle si está seguro de que quiere cerrar la página.
Mi problema aquí es que el detector de eventos no se elimina cuando el usuario vacía el campo de entrada.
Agregar el oyente funciona sin problemas y el oyente mismo hace lo que debería. Pero parece que no puedo eliminar el oyente correctamente.
Cuando se ejecuta el bloque else if , mi estado eventListenerActive se restablece, y en la siguiente entrada del usuario habrá otro eventListener convirtiéndolo en 2 ya.
Intenté agregar y eliminar evenListeners a través de botones externos con el evento onClick, y eso realmente funcionó.
Además, también leí que la función de manejo de eventos no debe ser anónima, cuando quiero eliminarla, así que le di un nombre aquí.
Entonces, ¿qué estoy haciendo mal aquí, que no se eliminará eventListener?
Gracias por adelantado
Lo descubrí yo mismo. Este artículo fue muy útil: Eliminar controladores de eventos en React
El problema real era que javascript compara internamente la función del controlador cuando se agregó el oyente con la función del controlador cuando se elimina el oyente. Dado que React vuelve a renderizar el componente, la función del controlador se inicializa nuevamente, lo que da como resultado una falta de coincidencia entre la función del controlador "antigua" y la "nueva".
Tuve que agregar una función useCallback a mi controlador, por lo que el controlador se memoriza y permanece igual en comparación con removeEventListener :
const promptOnLeaving = useCallback((ev) => { ev.returnValue = true; }, [])