37 lines
869 B
JavaScript
37 lines
869 B
JavaScript
import { useEffect, useRef } from "react";
|
|
|
|
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);
|
|
};
|
|
|
|
export default useEffectDebugger;
|