为什么 useEffect 在从警告exhaustive-deps linter 添加函数后会触发多个？

Question

给定一个简单的钩子函数 useFoo 和一个简单的函数 foo。

当我在 useEffect 中使用函数时，一切似乎都运行良好，但我收到详尽的 deps 的警告，说该函数必须列为依赖项。

当我将函数添加到 deps 数组时，它会导致效果根据情况重复甚至连续触发。

为什么 foo 不稳定？或者如何让警告消失，并保持我的代码正常工作？

const useFoo = () => {
  const foo = () => {
    return 'foo'
  }
  return {
    foo
  }
}

export default useFoo

用于没有 dep 的控件

  useEffect(() => {
    console.log('i fire 2 times because of React.Strict')
  }, [])

与 dep 一起用于控件

  useEffect(() => {
    console.log('i fire many times')
  }, [foo])

Answer 1

需要在foo函数中添加UseCallback以使其稳定。

const useFoo = () => {
  const foo = useCallback(() => {
    return 'foo'
  }, [])
  return {
    foo
  }
}