An example of how to log what dependency array item changed to trigger a useEffect

useDebugEffectDepArrayChanges.ts

import { useEffect, useRef, useState } from 'react';

export const useDebugEffectDepArrayChanges = () => {
  const [s1, setS1] = useState(false);
  const [s2, setS2] = useState(false);
  const [s3, setS3] = useState(false);
  const prevDepsRef = useRef<{
    s1: boolean;
    s2: boolean;
    s3: boolean;
  }>();

  /**
   * An example of how to log what dependency array item changed to trigger a useEffect
   */
  useEffect(() => {
    const deps = {
      s1,
      s2,
      s3,
    };
    if (prevDepsRef.current) {
      Object.entries(deps).forEach(([key, value]) => {
        const prevValue = prevDepsRef.current?.[key as keyof typeof deps];
        if (prevValue !== value) {
          console.log(`Dependency changed: ${key}`, {
            previous: prevValue,
            current: value,
          });
        }
      });
    }
    prevDepsRef.current = deps;
  }, [s1, s2, s3]);
};