之前在 reactjs/rfcs 看到的 useEvent 就是用来解决这种问题的

```
function useEvent(handler) {
  const handlerRef = useRef(null);
  useLayoutEffect(() => {
    handlerRef.current = handler;
  });
  return useCallback((...args) => {
    const fn = handlerRef.current;
    return fn(...args);
  }, []);
}
```

或者直接
```
const xxx = useRef();
xxx = () => {};

...

xxx.current();
```

// eslint-disable-next-line react-hooks/exhaustive-deps     😏

@Asuler #10 我之前用 react 也遇到同样的问题，最后使用的 8 楼的 ref 方式（但是这样写有种不得劲的感觉，总有种在 react/vue 里面直接操作 dom 一样的违和感）

@leroy20317 正解，useEffect 里面拿到的函数 aHandle ，bHandle 都是最新的，不需要放到依赖项里面。

具体逻辑不清楚，如果没看过建议先看看 https://zh-hans.react.dev/learn/you-might-not-need-an-effect ，有时候并不需要 useEffect

很简单，你不要在 aHandle 和 bHandle 里用 prop 和 state 就可以了，你把他们当成 sateless 的方法，需要这类状态直接通过 effect 里传进去，就不会有依赖问题了

用 ref 是正解，不过如果 aHandle ，bHandle 没有其他依赖项也可以正常引用，就是一直保持组件渲染第一次的地址

这个应该不需要 hook 吧

在切换 type 的那个 onChange/onSelect/onClick 做，
onChange={(type: string) => {
            if (type === 'aaa') {
              aHandle()
            } else if (type === 'bbb') {
              bHandle()
            }
            // ...
          }}

meta575 super996 是正解。useEffect 是处理函数的副作用，而不是去监听值（这两者在某些场景下容易混淆）