En los documentos de React Hooks se muestra cómo eliminar EventListener durante la fase de limpieza del componente. https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect
En mi caso de uso, estoy tratando de eliminar EventListener condicional a una propiedad de estado del componente funcional.
Aquí hay un ejemplo en el que el componente nunca se desmonta, pero el detector de eventos debe eliminarse:
function App () { const [collapsed, setCollapsed] = React.useState(true); React.useEffect( () => { if (collapsed) { window.removeEventListener('keyup', handleKeyUp); // Not the same "handleKeyUp" :( } else { window.addEventListener('keyup', handleKeyUp); } }, [collapsed] ); function handleKeyUp(event) { console.log(event.key); switch (event.key) { case 'Escape': setCollapsed(true); break; } } return collapsed ? ( <a href="javascript:;" onClick={()=>setCollapsed(false)}>Search</a> ) : ( <span> <input placeholder="Search" autoFocus /> <a href="javascript:;">This</a> <a href="javascript:;">That</a> <input placeholder="Refinement" /> </span> ); } ReactDOM.render(<App />, document.body.appendChild(document.createElement('div')));(Muestra en vivo en https://codepen.io/caqu/pen/xBeBMN )
El problema que veo es que la referencia handleKeyUp dentro de removeEventListener cambia cada vez que se procesa el componente. La función handleKeyUp necesita una referencia a setCollapsed , por lo que App debe incluirla. Mover handleKeyUp dentro useEffect también parece activarse varias veces y perder la referencia al handleKeyUp original.
¿Cómo puedo condicionalmente window.removeEventListener usando React Hooks sin desmontar el componente?
Puede colocar la función handleKeyUp dentro de la función asignada a useEffect ( que es la forma recomendada de hacerlo de acuerdo con la documentación oficial ) y solo agregue el oyente y devuelva una función de limpieza cuando collapsed sea falsa.
useEffect(() => { if (collapsed) { return; } function handleKeyUp(event) { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); return () => window.removeEventListener("keyup", handleKeyUp); }, [collapsed]);La respuesta de Tholle puede funcionar, pero es una mala práctica declarar una función dentro de un if .
Hace que sea más difícil seguir cuándo se declara la función y cuándo no. También puede generar errores porque las funciones se elevan.
Hay una forma más ordenada de arreglarlo:
Al envolver su controlador de eventos con el enlace useCallback .
const [collapsed, setCollapsed] = useState(true) const handleKeyUp = useCallback((event) => { if (event.key === "Escape") { setCollapsed(true) } }, [setCollapsed]) useEffect(() => { if (!collapsed) { window.addEventListener("keyup", handleKeyUp) } else { window.removeEventListener("keyup", handleKeyUp) } return () => window.removeEventListener("keyup", handleKeyUp) }, [collapsed, handleKeyUp])useCallback tiene una dependencia en setCollapsed . Esto asegura que handleKeyUp no se redefina cuando el componente se vuelve a renderizar (lo que siempre sucede cuando cambia el estado)useEffect agregará/eliminará condicionalmente el detector de eventos; de lo contrario, los eventos seguirán activándose mientras el componente esté montado.Si usa muchos controladores de eventos en useEffect, hay un enlace personalizado para eso: https://usehooks.com/useEventListener/
Aquí está el ejemplo de carteles de preguntas actualizado con mi solución: https://codepen.io/publicJorn/pen/eYzwENN