Debug which props changed for React Hooks

useLayoutEffectDebug.js

function useLayoutEffectDebug(fn, deps) {
  const [lastDeps, setLastDeps] = useState([]);

  useLayoutEffect(() => {
    console.log({ lastDeps, deps });

    lastDeps && console.log(deps.findIndex((value, index) => value !== lastDeps[index]));

    setLastDeps(deps);

    return fn();
  }, deps);
}