为何添加exhaustive-deps提示的函数后useEffect多次触发？

原因分析 #

每次调用useFoo钩子时，都会在钩子内部重新创建一个全新的foo函数。JavaScript里函数属于引用类型，每次创建的函数实例内存地址都不一样。当你把foo加入useEffect的依赖数组后，组件（或钩子）每次重新执行时，React都会检测到依赖项的引用发生变化，进而反复触发useEffect的回调。

解决方法 #

• 用useCallback缓存函数
  这是最通用的解决方案，通过useCallback将foo函数缓存起来，只有当它的依赖项变化时才会重新生成函数实例。修改后的useFoo钩子如下：

  import { useCallback } from 'react';
  
  const useFoo = () => {
    const foo = useCallback(() => {
      return 'foo';
    }, []); // 依赖数组为空，因为foo内部没有使用钩子内的任何变量
    return { foo };
  };
  
  export default useFoo;
  

  这样foo的引用会保持稳定，除非依赖数组中的内容改变，useEffect就不会无故重复触发了。

• 将函数移到钩子外部（无内部依赖时）
  如果foo不需要访问useFoo钩子内部的状态或变量，直接把它定义在钩子外面，这样它只会被创建一次，引用永远不会变化：

  const foo = () => {
    return 'foo';
  };
  
  const useFoo = () => {
    return { foo };
  };
  
  export default useFoo;
  

• 在useEffect内部定义函数（仅该effect使用时）
  如果foo只在特定的useEffect中使用，直接把它定义在useEffect内部，这样就不需要将其加入依赖数组：

  useEffect(() => {
    const foo = () => {
      return 'foo';
    };
    console.log(foo());
  }, []);
  

内容的提问来源于stack exchange，提问作者Jason Hernandez