确定哪个依赖数组变量导致 useEffect 钩子触发 [英] Determine which dependency array variable caused useEffect hook to fire

问题描述

是否有一种简单的方法可以确定 useEffect 依赖项数组中的哪个变量触发函数重新触发?

Is there an easy way to determine which variable in a useEffect's dependency array triggers a function re-fire?

简单地注销每个变量可能会产生误导，如果 a 是一个函数而 b 是一个对象，它们在记录时可能看起来相同但实际上不同并导致 useEffect火灾.

Simply logging out each variable can be misleading, if a is a function and b is an object they may appear the same when logged but actually be different and causing useEffect fires.

例如:

React.useEffect(() => {
  // which variable triggered this re-fire?
  console.log('---useEffect---')
}, [a, b, c, d])

我目前的方法是一个一个删除依赖变量​​，直到我注意到导致过度调用 useEffect 的行为，但必须有更好的方法来缩小范围.

My current method has been removing dependency variables one by one until I notice the behavior that causes excessive useEffect calls, but there must be a better way to narrow this down.

推荐答案

我最终从各种答案中汲取了一点点来解决这个问题.我希望能够直接删除一些东西来代替 useEffect，以便快速调试触发 useEffect 的依赖项.

I ended up taking a little bit from various answers to make my own hook for this. I wanted the ability to just drop something in place of useEffect for quickly debugging what dependency was triggering useEffect.

const usePrevious = (value, initialValue) => {
  const ref = useRef(initialValue);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
  const previousDeps = usePrevious(dependencies, []);

  const changedDeps = dependencies.reduce((accum, dependency, index) => {
    if (dependency !== previousDeps[index]) {
      const keyName = dependencyNames[index] || index;
      return {
        ...accum,
        [keyName]: {
          before: previousDeps[index],
          after: dependency
        }
      };
    }

    return accum;
  }, {});

  if (Object.keys(changedDeps).length) {
    console.log('[use-effect-debugger] ', changedDeps);
  }

  useEffect(effectHook, dependencies);
};

下面是两个例子.对于每个示例，我假设 dep2 从 'foo' 更改为 'bar'.示例 1 显示了没有传递 dependencyNames 的输出，示例 2 显示了一个示例 with dependencyNames.

Below are two examples. For each example, I assume that dep2 changes from 'foo' to 'bar'. Example 1 shows the output without passing dependencyNames and Example 2 shows an example with dependencyNames.

示例 1

之前:

useEffect(() => {
  // useEffect code here... 
}, [dep1, dep2])

之后:

useEffectDebugger(() => {
  // useEffect code here... 
}, [dep1, dep2])

控制台输出:

{
  1: {
    before: 'foo',
    after: 'bar'
  }
}

对象键 '1' 表示发生变化的依赖项的索引.在这里，dep1 改变了并且是依赖项中的第二项，或者索引 1

The object key '1' represents the index of the dependency that changed. Here, dep1 changed and is the 2nd item in the dependency, or index 1

示例 2

之前:

useEffect(() => {
  // useEffect code here... 
}, [dep1, dep2])

之后:

useEffectDebugger(() => {
  // useEffect code here... 
}, [dep1, dep2], ['dep1', 'dep2'])

控制台输出:

{
  dep2: {
    before: 'foo',
    after: 'bar'
  }
}

这篇关于确定哪个依赖数组变量导致 useEffect 钩子触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！