useEffect cleanup函数

Question

我使用使用效果来实现取消。因此，存在延迟，这是在去抖动中执行的。据我所知，使用效果会使信息泄漏，并成为一个空函数。如何使其在没有“成本”状态的情况下，函数将无法工作，并且不会出现警告

错误:警告:无法更新已卸载组件的反应状态。这不是一个操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消使用效果清理功能中的所有订阅和异步任务。

代码：

    function useDebounce(value,fn, delay) {
      useEffect(() => {
          const handler = setTimeout(() => { fn() }, delay);
          return () => {  clearTimeout(handler) };
        },[value]);
    }

Answer 1

您可以创建已装载的检查。

function useDebounce(value,fn, delay) {
  useEffect(() => {
    let mounted = true;
    const handler = setTimeout(() => {
       if (mounted) fn();
    }, delay);
    return () => {
      mounted = false;
      clearTimeout(handler);
    };
  },[value]);
}