Skip to content

Instantly share code, notes, and snippets.

@compulim

compulim/useDebugDeps.js

Last active February 19, 2020 10:17
Show Gist options
  • Save compulim/d0ae148df5245c3ab1800c77ef9331cf to your computer and use it in GitHub Desktop.
Save compulim/d0ae148df5245c3ab1800c77ef9331cf to your computer and use it in GitHub Desktop.
Download ZIP
Track changes on every render via React hooks
Raw
useDebugDeps.js
import { useRef } from 'react';
export default function useDebugDeps(depsMap, name) {
const lastDepsMapRef = useRef({});
const { current: lastDepsMap } = lastDepsMapRef;
const keys = new Set([...Object.keys(depsMap), ...Object.keys(lastDepsMap)]);
const keysChanged = Array.from(keys).filter(key => !Object.is(depsMap[key], lastDepsMap[key]));
if (keysChanged.length) {
console.groupCollapsed(`Changes found in ${ name }`);
console.log(keysChanged);
console.groupEnd();
}
lastDepsMapRef.current = depsMap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment