Removing event listener

[lsbyerley]

Thanks for the awesome hook!

Apologies if this is obvious but how would you remove the event listener? Let's say i'm attaching it based on the value of another variable..

if (editState === 'haschanges) {
  useEventListenter('beforeunload', handler);
} else {
  // remove the listener
}

[iamaamir]

may be passing the condition to the hook for removing .

useEventListenter('beforeunload', handler,  editState === 'haschanges');

or may be simply passing handler as null

useEventListenter('beforeunload', editState === 'haschanges' ? handler : null);

[MarkMYoung]

I think the cleanest way is for useEventListenter to return an object with a reference to the "cleanup" function, possibly called remove.

  const cleanupRef = useRef();
...
  useEffect(() => {
...
    cleanupRef.current = () => {
      element.removeEventListener(eventName, eventListener, opts);
    };
    return cleanupRef.current;
  }, [eventName, element, capture, passive, once]);
  return { remove: cleanupRef };
};

I'm not sure about returning a useRef vs. its current value, but you get the idea.

const { remove: removeClickHandler } = useEventListener('click', ...);