Debounced Hover on Nested Components Using Event Delegation

Consider the following case:

const FirstLayeredElement = () => (
  <>
    <SecondLayeredElement/>
    ...
  </>
)
const SecondLayeredElement = () => (
  <>
     <DeepestElement1/>
     <DeepestElement2/>
     ...
  </>
)
const DeepestElement1 = () => (
  <span>...</span>
);
const DeepestElement2 = () => (
  <span>...</span>
);

where we want to fire a function logAnalytics()

• when the cursor is hovered on a DeepestElement for some seconds (e.g. 1s)
• and we want to know which DeepestElement is captured (Consider some of the info needs to come from the parent components, so we couldn't simply add a listener in DeepestElements)

One of the approach is

• pass onMouseEnter handlers into nested div, with the use of debounce from lodash-es

const FirstLayeredElement = () => {
  return (
    <>
      <SecondLayeredElement
        onMouseEnter={(labelType) => logAnalytic(labelType, "Some other info")}
      />
      ...
    </>
  )
}
const SecondLayeredElement = ({onMouseEnter}) => {
  return (
     <DeepestElement1
       onMouseEnter={onMouseEnter}
     />
     <DeepestElement2
       onMouseEnter={onMouseEnter}
     />
     ...
  )
}
const DeepestElement1 = ({ onMouseEnter }) => {
  // Delay for one second
  const debouncedMouseEnter = onMouseEnter
    ? debounce(onMouseEnter, 1000)
    : undefined;
  return (
    <span
      onMouseEnter={() => debouncedMouseEnter("someLabelType1")}
    >
      ...
    </span>
  );
};
const DeepestElement2 = ({ onMouseEnter }) => {
  // Delay for one second
  const debouncedMouseEnter = onMouseEnter
    ? debounce(onMouseEnter, 1000)
    : undefined;
  return (
    <span
      onMouseEnter={() => debouncedMouseEnter("someLabelType2")}
    >
      ...
    </span>
  );
};

But seems lots of useless listeners are added...could we do it in a simpler way?

Event Delegation Approach

• First we define a hook useDebounceHover, the input onHover will be called onMouseOut if the time difference between onMouseOver and onMouseOut > 1s (onMouseEnter cannot be used in event delegation, check here and here for more details)

import { DOMAttributes, MouseEvent, useRef } from "react";
const ComponentIdToTypeMapping = {
  some_data_id_1: "someLabelType1",
  some_data_id_2: "someLabelType2",
  ...
}
const useDebounceHover = <T = Element>(
  onHover?: (event: MouseEvent<T>) => void,
  duration = 1000,
): Pick<DOMAttributes<T>, "onMouseOver" | "onMouseOut"> => {
  const labelToHoverDurationMap = useRef({
    some_data_id_1: 0,
    some_data_id_2: 0,
    ...
  });

  const handleMouseOver = (event: MouseEvent<T>) => {
    const labelType = ComponentIdToTypeMapping[event.target.dataset.id];
    if (labelType) {
      labelToHoverDurationMap.current[labelType] = Date.now();
    }
  };

  const handleMouseOut = (event: MouseEvent<T>) => {
    const now = Date.now();
    const labelType = ComponentIdToTypeMapping[event.target.dataset.id];
    if (labelType) {
      if (
        onHover &&
        now - labelToHoverDurationMap.current[labelType] > duration
      ) {
        onHover(event);
      }
      labelToHoverDurationMap.current[labelType] = 0;
    }
  };

  return { onMouseOver: handleMouseOver, onMouseOut: handleMouseOut };
};

export default useDebounceHover;

• And so you could:

const FirstLayeredElement = () => {
  const { onMouseOver, onMouseOut } = useDebounceHover(logAnalytic);
  return (
    <div 
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
    >
       <SecondLayeredElement/>
       ...
    </div>
  )
}
const SecondLayeredElement = () => (
  <>
     <DeepestElement1/>
     <DeepestElement2/>
     ...
  </>
)
const DeepestElement1 = () => (
  <span data-id="DeepestElement1">...</span>
);
const DeepestElement2 = () => (
  <span data-id="DeepestElement2">...</span>
);

The presentation layer should be simpler coz with the hook, we just need to

• add a parent div for onMouseOver and onMouseOut
• add data-id to the deepest components

Conclusion

Note that React has done some optimization so the performance w/o event delegation are similar. Event Delegation does not help in performance in React. But for simplicity, actually my team prefers to use Event Delegation.

But again, there's always trade-off and it depends on different cases ;D.