javascript - Memory leak with bounding box in React useEffect

Question

So I have a custom hook that will track the bounding box of some animated divs, but it has a memory leak when I add my bounding box to the useEffect dependencies and I can't figure out how to plug the gap.

See the hook below, as well as a working example here on codesandbox

import { useCallback, useEffect, useState } from 'react';

const useBoundingBoxWithEventListeners = (ref) => {
  const [bbox, setBbox] = useState({});

  const set = useCallback(() => 
    setBbox(ref && ref.current ? ref.current.getBoundingClientRect() : {}), [ref]);
  
  useEffect(() => {
    set();
    window.addEventListener('resize', set); 
    
    return () => {
      window.removeEventListener('resize', set); 
    };
  }, [ref, set, bbox]);

  return { bbox, ref };
};

export { useBoundingBoxWithEventListeners };

question from:https://stackoverflow.com/questions/65617281/memory-leak-with-bounding-box-in-react-useeffect

Answer 1

Waitting for answers