Track which dependency caused useEffect to run

useUsEffectWithChangeLogs.js

/**
Sometimes with a lot of dependencies it becomes tedious to track what changed.
In such cases `useEffect` can be replaced with this during dev to monitor changes in state.
**/
const useUsEffectWithChangeLogs = (
  callback,
  dependency,
  id = "Changes for anonymous effect"
) => {
  const last = useRef(dependency);
  useEffect(() => {
    if (process.env.NODE_ENV === "development") {
      const current = dependency;
      const changes = [];
      current.forEach((k, i) => {
        if (!Object.is(k, last.current[i])) {
          changes.push({
            "Index Changed": i,
            "Old Value": last.current[i],
            "New Value": k,
          });
        }
      });
      last.current = current;
      if (changes.length) {
        console.log(id);
        console.table(changes);
      }
    }
    return callback();
  }, dependency);
};