useEventListener: Unable to bind event to specific dom element.

[mitsuhatu]

As the title, when I use useEventListener to bind click event to dom element, it's not work.

function App() {
 const itemRef = useRef(null);

 const onMouseEnter = (e) => {
   console.log(e, 'enter');
 };

 const onMouseLeave = (e) => {
   console.log(e, 'leave');
 };

 useEventListener('mouseover', onMouseEnter, itemRef.current);
 useEventListener('mouseout', onMouseLeave, itemRef.current);

 return (
   <div className="App">
     <div ref={itemRef}>item</div>
   </div>
 );
}

Because ref.current from null to dom element, useEventListener will not update.

When I made the following adjustments, It will be OK.

1. parameter: element replace by ref;

function App() {
  const itemRef = useRef(null);

  const onMouseEnter = (e) => {
    console.log(e, 'enter');
  };

  const onMouseLeave = (e) => {
    console.log(e, 'leave');
  };

  useEventListener('mouseover', onMouseEnter, itemRef);
  useEventListener('mouseout', onMouseLeave, itemRef);

  return (
    <div className="App">
      <div ref={itemRef}>item</div>
    </div>
  );
}

2. use ref.current to bind event and adjust dependencies of useEffect;

function useEventListener(eventName, handler, ref) {
	const savedHandler = useRef();
	useEffect(() => {
		savedHandler.current = handler;
	}, [handler]);

	useEffect(() => {
		const element = ref ? ref.current : window;
		const isSupported = element && element.addEventListener;

		if (!isSupported) return;

		const eventListener = (event) => savedHandler.current(event);
                 element.addEventListener(eventName, eventListener);

		return () => {
			element.removeEventListener(eventName, eventListener);
		};
	}, [eventName, ref]);
}