hooks使用useEffect时加入依赖项会导致无限循环

Question

问题描述

在useEffect里使用外部方法(变量)时如果不填充到依赖项会出现警告，但是加入了之后会导致无限循环，请问根本原因是什么？如何解决？

问题出现的环境背景及自己尝试过哪些方法

即使在外部添加了useCallback缓存函数，也无法解决

相关代码

const [params, setParams] = useState<any>();

// 1.正常运行 但出现警告:missing dependency getList
const getList = useCallback(params => {
   // xxx
 }, [params]);
 
useEffect(() => {
  getList();
}, [params]);

// 2.虽然解决掉警告，但进入死循环，猜是因为params导致getList不断更新，但不清楚useCallback为什么不起作用
const getList = useCallback(params => {
   // xxx
 }, [params]);
 
useEffect(() => {
  getList();
}, [getList, params]);

// 3.去掉了params依赖项，但同样进入死循环
const getList = useCallback(() => {
   // xxx
 }, []);
  
useEffect(() => {
  getList();
}, [getList]);

你期待的结果是什么？实际看到的错误信息又是什么？

能够解决死循环的同事，解决警告

Answer 1

useEffect 死循环

1. useEffect 在传入第二个参数时一定注意：第二个参数不能为引用类型，会造成死循环。
   比如：[]===[] 为false，所以会造成 useEffect 会一直不停的渲染。
2. useEffect 的 callback 函数中改变的 state 一定不能在该 useEffect 的依赖数组中。比如：useEffect(()=>{ setCount(count); }, [count]);依赖 count，callback 中又 setCount(count)。

Answer 2

要看下getList的具体实现，是不是内部使用了setParams，导致params改变，又触发了更新

Answer 3

getList 中是否还使用了其他 state 或者 props ？