Performance question about useHover

[mrcoles]

Hi! I’m looking at the source for userHover and I have a question about performance (and also hoping this will help me better understand React performance in general). Why not employ useCallback?

Digging deeper—is this just because useEventListener already works around this problem by tracking the handler inside a ref, which avoids removing and re-registering a handler in the DOM on every render? So… it’s negligible if the handler keeps changing it’s reference value?

I was assuming to see something like this:

  const handleMouseEnter = useCallback(() => {
    setValue(true)
  }, [setValue]);
  const handleMouseLeave = useCallback(() => {
    setValue(false)
  }, [setValue]);

or like this with a single useMemo:

  const { handleMouseEnter, handleMouseLeave}  = useMemo(() => {
    return {
      handleMouseEnter() {
        setValue(true)
      },
      handleMouseLeave() {
        setValue(false)
      },
    }
  }, [setValue]);

but is the extra memory overhead actually a waste (especially given how useEventListener handles things)?