有没有办法记住从参数传递的函数 - (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 将触发无限循环。

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

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

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

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

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

知道我怎样才能实现我的目标吗？如果 none 那我就祈祷其他开发者在使用它之前先阅读它。

Answer 1

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

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

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

有没有办法记住从参数传递的函数 - (useCallback) exhaustive-deps

Is there a way to memoize a function passed from params - (useCallback) exhaustive-deps

javascript

reactjs

parameter-passing

react-hooks

memoization