请教一个 react hook 的问题

关于 react 的 useEffect ，如果我要监听一个值，并且在值变化的时候做一些函数调用
```
  useEffect(()=>{
    if(type === aaa){
      aHandle();
    }else if(type === bbb){
      bHandle();
    }
  }, [type])
```
那我就需要把 aHandle 和 bHandle 放入依赖项中,否则 eslint 或者 sonarlint 会报警告
```
  useEffect(()=>{
    if(type === aaa){
      aHandle();
    }else if(type === bbb){
      bHandle();
    }
  }, [type, aHandle, bHandle])
```
那这样岂不是每次 render ，都会重新生成新的 ahandle 和 bHandle ，每次都会触发 useEffect 吗？

我知道有 useCallback 和 useRef 可以解决函数在每次 render 都重新生成的问题，但问题是假如我在 aHandle 里去调接口，也要获取很多放在 state 中的值作为参数，那么 useCallback 还得把那些值全部放在 useCallback 的依赖项里，搞得越来越复杂了。

难道只能用 useRef 或者基于 useRef+useCallback 封装的一些 hook ，把每个 aHandle 或者 bHandle 给套上吗。

有没有更优雅一点的写法，我想要有一个 useXXXEffect,可以只监听一个 type ，在这里面获取到的其他值都是最新的，不再额外需要传入 aHandle 或者 bHandle 。

有没有这样的 hook 或者封装成这种效果的 hook

这种感觉就是 eslint 的锅， 这种场景还是很多的，因为 useEffect 不能直接用 async ，所以函数定义在 useEffect 里又不能共用，抽出来又出现你这种依赖报错问题，但是实际上不加函数依赖是正常的，用这种依赖问题又一大堆冗余代码。如果全局 eslint 改不掉建议用   eslint-disable-next-line 这种禁用掉。

@rocmax #45 别洗了，缺点就是缺点

闭包问题，在 react 里面没有太好的解决方案，op 说的是否还要再往上套的问题是肯定的，如果想要保持引用稳定就是要付出这个代价，这也就是 react 目前的问题。
vue 或者 solidjs 这些没有这个问题是因为他们所有的数据外面都有一层壳，vue 的 val.value ，solidjs 的 value()，都是帮你在外面加了一层，当然渲染机制也不同，所以加壳就加吧。

是不是把 vue 里用 watch 的习惯带来了？
type 在哪里变的就在哪里挂处理函数，useeffect 不是干这个的

主要是 aHandle 是不是纯的，它是纯的话，你甚至可以拿到组件外边去。如果不纯的话，它依赖什么数据？依赖变化的时候，它是需要更新的。

@otakustay 以前都得这么干 TAT

最新版本是 useEffectEvent ，以前版本是用 useRef 存它，然后再补个 useEffect 更新它

正如前排所说你可能不需要使用 useEffect 。useEffect 不应该用于监听某个东西的变化，应该用于组件时卸载清理的工作，例如取消订阅。

官方文档专门对这种情况进行了说明 https://react.dev/learn/you-might-not-need-an-effect

非常的典型的 useEvent 场景，直接用 useMemoizedFn 就行了。否则就放在 onClick 里面做

把 lint 禁掉就行了，hooks lint 不太智能，挺烦的