Determine which dependency array variable caused useEffect hook to fire

by

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);
};

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.

Example 1

Before:

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

After:

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

Console output:

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

The object key ‘1’ represents the index of the dependency that changed. Here, dep2 changed as it is the 2nd item in the dependency, or index 1.

Example 2

Before:

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

After:

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

Console output:

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

More Related Contents:

  1. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  2. How can I use multiple refs for an array of elements with hooks?
  3. React useEffect in depth / use of useEffect?
  4. Is useState synchronous? [duplicate]
  5. React hooks – right way to clear timeouts and intervals
  6. React Hooks useState() with Object
  7. Can I set state inside a useEffect hook
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. Where can I make API call with hooks in react?
  10. Multiple calls to state updater from useState in component causes multiple re-renders
  11. What’s the difference between `useRef` and `createRef`?
  12. How can I force a component to re-render with hooks in React?
  13. Executing async code on update of state with react-hooks
  14. Why React Hook useState uses const and not let
  15. How to change the value of a Context with useContext?
  16. How to prevent re-rendering of components that have not changed?
  17. How target DOM with react useRef in map
  18. How to programmatically clear/reset React-Select?
  19. React Hooks Error: Hooks can only be called inside the body of a function component
  20. React hooks: call component as function vs render as element
  21. React hooks useState setValue still rerender one more time when value is equal
  22. Why can’t React Hooks be called inside loops or nested function?
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. React Hook “useEffect” is called conditionally
  26. TypeError dispatcher.useState is not a function when using React Hooks
  27. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment