有没有一种方法可以对通过参数传递的函数进行记忆化 - (useCallback) exhaustive-deps

Question

我有一个小代码片段：

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

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

}

在上面的代码中，如果在传递之前未对callbackFunc进行记忆化（即用useCallback包装），useEffect将触发无限循环。

在hook中使用useCallback来包装函数仍然会触发无限循环，因此不建议这样做：

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

以上代码会因为`callbackFunc`而触发无限循环。

是的，我很清楚我可以在传递给此钩子之前使用useCallback包装函数，但我唯一的问题是：其他/未来的开发人员很可能只传递非记忆化函数，这就是让我担心的地方。

我不能在useEffect/useCallback第二个参数数组中删除callbackFunc，因为那违反了exhaustive-deps规则，而且高级开发人员也不允许这样做。

有什么方法可以实现我的目标吗？如果没有，那么我只能祈祷其他开发人员在使用它之前先看一下这个钩子。

- I am L

Answer 1

你可以这样做，但你将无法再修改回调函数。

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

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

- Dmitrii G.