Skip to main content

useEventListener() ↔ Custom Hook to Refactor event listeners

export default function useEventListener(eventName, handler, element=window) {
  const saveHandler = useRef()
  
  useEffect(() => {
    saveHandler.current = handler
  }, [handler])
  
  useEffect(() => {
    const allow = element && element.addEventListener
    if(!allow) return
    const eventListner = e => saveHandler.current(e)
    element.addEventListener(eventName, eventListener)
    
    return () => element.removeEventListener(eventName, eventListener)
  }, [eventName, element])
}

References​