javascript - React useEffect中带有边界框的内存泄漏

Question

所以我有一个自定义钩子可以跟踪一些动画 div 的边界框，但是当我将边界框添加到useEffect依赖项时它会出现内存泄漏，我不知道如何填补空白。

请参阅下面的钩子，以及代码沙盒上的一个工作示例

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 };

标签： javascriptreactjs