Aunque se agrega removeEvent , el inicio de sesión de la consola en customFunction se imprime varias veces con cada procesamiento. Entiendo que esto tiene que ver con el cierre pero no puedo identificar la solución. Cualquier ayuda es apreciada.
import React, { useEffect, useState } from "react"; function addOnEvent(event_name, callback){ document.addEventListener(event_name, (e)=>callback(e.detail)); } function removeEvent(event_name, callback){ document.removeEventListener(event_name, callback); } function App() { const [some_state, set_some_state] = useState([]); const customFunction = (e) => { //some action here setting some_state console.log("Console prints multiple times") }; useEffect(() => { addOnEvent('custom_event', customFunction) return () => { removeEvent('custom_event', customFunction) }; }, [some_state]); return ( <div className="App"> </div> ); } export default App;No está limpiando el detector de eventos correctamente. Esto se debe a que ajusta la devolución de llamada dada con una nueva función de flecha. Por lo tanto, removeEventListener no encontrará un detector de eventos para eliminar.
Puede solucionar esto eliminando la función de flecha y extrayendo el e.detail en su customFunction en su lugar.
import React, { useEffect, useState } from "react"; function addOnEvent(event_name, callback){ document.addEventListener(event_name, callback); } function removeEvent(event_name, callback){ document.removeEventListener(event_name, callback); } function App() { const [some_state, set_some_state] = useState([]); const customFunction = (e) => { //some action here setting some_state console.log("Console prints multiple times") }; useEffect(() => { addOnEvent('custom_event', customFunction) return () => { removeEvent('custom_event', customFunction) }; }, [some_state]); return ( <div className="App"> </div> ); } export default App; Si realmente solo desea el e.detail en su devolución de llamada, también puede actualizar la función addOnEvent para devolver una función de no escucha como esta:
import React, { useEffect, useState } from 'react'; function addOnEvent(event_name, callback) { const listener = e => callback(e.detail); document.addEventListener(event_name, listener); return () => document.removeEventListener(event_name, listener); } function App() { const [some_state, set_some_state] = useState([]); const customFunction = (e) => { //some action here setting some_state console.log('Console prints multiple times'); }; useEffect(() => { const unlisten = addOnEvent('custom_event', customFunction); return () => unlisten(); }, [some_state]); return ( <div className="App"> </div> ); } export default App;