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

Question

考虑这个人为设计的代码片段。

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

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

Best way to resolve react-hooks/exhaustive-deps warning

reactjs

eslint

react-hooks