useDebugDeps.ts

import * as React from 'react';
import { padStart, eq, isEqual } from 'lodash';

export function useDebugDeps(name: string, deps: unknown[]): void {
  const previousDepsRef = React.useRef(deps);
  const countRef = React.useRef(0);

  printDepsChange(name, deps, previousDepsRef.current, countRef.current);

  previousDepsRef.current = deps;
  countRef.current += 1;
}

type DebugDepsFn = (deps: unknown[]) => void;

export function makeDebugDeps(name: string): DebugDepsFn {
  let previousDeps: unknown[] = [];
  let count = 0;

  return (deps: unknown[]) => {
    printDepsChange(name, deps, previousDeps, count);

    previousDeps = deps;
    count += 1;
  };
}

function printDepsChange(name: string, deps: unknown[], previousDeps: unknown[], count: number) {
  const dateString = new Date().toISOString();

  if (count === 0) {
    console.log(`🔵 DEPS ${name}: INITIAL - ${dateString}`);
    for (const [index, value] of deps.entries()) {
      console.log(`  - ${index}: ${formatValue(value, 100)}`);
    }
    console.log('');

    return;
  }

  const areTheSame = deps.length === previousDeps.length && deps.every((_, index) => eq(deps[index], previousDeps[index]));
  if (areTheSame) {
    console.log(`🟢 DEPS ${name}: UPDATE ${count} - NO CHANGES ${dateString}`);
    console.log('');
    return;
  }

  console.log(`🔴 DEPS ${name}: UPDATE ${count} - ${dateString}`);
  for (const [index, value] of deps.entries()) {
    const previousValue = previousDeps[index];
    if (eq(value, previousValue)) continue;

    if (isEqual(value, previousValue)) {
      console.log(`  - ${padStart(index.toString(), 2)}. ❗️IDENTITY CHANGE: ${formatValue(deps[index], 100)}`);
      continue;
    }

    console.log(`  - ${padStart(index.toString(), 2)}. ${formatValue(previousDeps[index], 50)} -> ${formatValue(deps[index], 50)}`);
  }
  console.log('');
}

function formatValue(value: unknown, length: number) {
  if (typeof value === 'function') {
    return '[Function]';
  }

  const serializedValue = JSON.stringify(value, getCircularReplacer());

  return serializedValue && serializedValue.length > length ? `${serializedValue.slice(0, length)}...` : serializedValue;
}

// See: https://stackoverflow.com/a/57615112
const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        return;
      }
      seen.add(value);
    }
    return value;
  };
};