Removing event listener

[donavon]

Removing event 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', ...);