解决 react-hooks/exhaustive-deps 警告的最佳方法

Question

考虑一下这个人为的代码 sn-p。

const foo = () => {return 1;} 
const bar = useMemo(() => {return foo();}, [foo])

当我触发 react-hooks/exhaustive-deps 警告时，我会收到这样的消息。

The 'foo' function makes the dependencies of useMemo Hook (at line 2) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own useCallback() Hook.

警告给了我 2 条建议：1) 将 foo 放在 bar 的 useMemo 回调中，或者 2) 将函数包装在 useCallback 中。

我当然也可以。我只是想知道：这两个选项中的任何一个是否比另一个更可取，如果是，那为什么？如果您的答案是“取决于”，那么它到底取决于什么？

Answer 1

两种方式都可以正常工作。偏好基于代码以及您对它们所做的事情。

例如，如果您在不止一个位置使用foo，那么将其移动到useMemo 回调中是行不通的。

如果你只在 useMemo 回调中使用foo，那么在其中定义它是有意义的。

在这种情况下，它看起来像：

const bar = useMemo(() => {
  const foo = () => 1;
  return foo();
  // include foo's dependencies in the deps array
}, []);

或者你可以内联定义它：

const bar = useMemo(() => {
  return 1;
  // include foo's dependencies in the deps array
}, []);

Answer 2

使用 useEffect 我想如何解决这个问题是有一个清理功能

const [mounted, setMounted] = useState(true);


useEffect(()=>{

    if (mounted){
        buzz();

    }

    //Cleanup function
    return ()=>{
        setMounted(false);
    }
}, [mounted]) //hook dependency