有没有办法记住从参数传递的函数 - (useCallback) 详尽的依赖

Question

所以我有这个小sn-p：

const useTest = (callbackFunc) => {
    const user = useSelector(selector.getUser); //  a value from store

    useEffect(() => {
      if (user.id === 1) {
         callbackFunc()
      }
    }, [callbackFunc, user.id])

}

在上面的代码中，如果 callbackFunc 在传递之前没有被记忆（包装在 useCallback 中），useEffect 将触发无限循环。

将函数包装在钩子内的 useCallback 上仍然会触发无限循环，所以这不是：

const cb = () => useCallback(() => callbackFunc, [callbackFunc]);

上面会触发无限循环，因为callbackFunc。

是我很清楚，我可以在传递给这个钩子之前将函数包装在 useCallback 中，我唯一的问题是：其他/未来的开发者很有可能调用这个钩子时只会传递一个非记忆函数，这让我担心。 `

由于exhaustive-deps 规则，我无法删除useEffect/useCallback 第二个参数数组上的callbackFunc - 并且高级开发人员也禁止删除它（或在此行上）。

知道我怎样才能实现我的目标吗？如果没有，那我就祈祷其他开发人员在使用之前先阅读钩子。

Answer 1

您可以这样做，但您将无法再修改回调

const funcRef = React.useRef(null)
useEffect(() => {
 funcRef = callbackFunc
}, [])

useEffect(() => {
   if (funcRef.current){
    if (user.id === 1) {
      funcRef.current()
    }
   }
}, [funcRef, user.id])