useEffect debugger

useEffectDebugger.js

/**
* From https://stackoverflow.com/a/59843241/24205983
*
* Example 1
* 
* Before:
* ```
* useEffect(() => {
*   // useEffect code here... 
* }, [dep1, dep2])
* ```
*
* After:
* ```
* useEffectDebugger(() => {
*   // useEffect code here... 
* }, [dep1, dep2])
* ```
*
* Console output:
* ```
* {
*   1: {
*     before: 'foo',
*     after: 'bar'
*   }
* }
* ```
* 
* 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'
*   }
* }
* ```
*/

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